动态改变dom结构常用方法
动态改变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>
