動態改變dom結構常用方法
阿新 • • 發佈：2019-05-05
char rem cli charset end value font create ica
動態改變dom結構常用方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>動態改變dom結構</title>
</head>
<script type="application/javascript">
/*
* 1.document.createElement();創建
* 2.parentnode.appendChild();追加
* 3.parentNode.removeChild()；刪除
* 4.parentNode.insertBefore();插入
* 5.parentNode.replaceChild();替換
*
*
* */
//1docuent.creatElement();
function createle(){
var obj=document.createElement("input");
obj.type="text";
console.log(obj);
}
function appendele(){
var obj = document.createElement("input");
obj.type="submit";
var father = document.getElementById("fromer");
father.appendChild(obj);
}
function removeele(){
var father = document.getElementById("fromer");
var child = document.getElementById("pwd")
father.removeChild(child);
}
function insertele(){
var father = document.getElementById("fromer");
var child = document.getElementById("pwd");
var newChild = document.createElement("input")
father.insertBefore(newChild,child);
}
function replaceele(){
var father = document.getElementById("fromer");
var child = document.getElementById("pwd");
var newChild = document.createElement("input");
newChild.type="submit";
father.replaceChild(newChild,child)
}
</script>
<body>
<button onclick="createle()">創建</button>
<button onclick="appendele()">追加</button>
<button onclick="removeele()">刪除</button>
<button onclick="insertele()">插入</button>
<button onclick="replaceele()">替換</button>
<hr/>
<from id="fromer">
用戶名：<input type="text " name = "user"><br/>
密碼：<input id="pwd" type="password" name = "pwd"><br/>
<input type="submit" value="提交" name="submit"><br/>
</from>
</body>
</html>
動態改變dom結構常用方法