JavaScript--DOM增删改操作
JavaScript使用DOM操作节点来进行增删改操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM节点</title>
<script type="text/javascript">
var flag = "帐号";
var flag1 = 0;
function modifyDOM() {
if (flag1 == 1) {
document.getElementById("txt").innerHTML = "帐号：";
document.getElementById("userName").value = "fuck";
flag1 = 0;
}
else if (flag1 == 0) {
document.getElementById("txt").innerHTML = "密码：";
document.getElementById("userName").value = "you";
flag1 = 1;
}
}
function addDOM() {
if(flag1 == 0) {flag = "帐号";flag1 = 1;}
else if(flag1 == 1) {flag = "密码"; flag1 = 0;}
var para = document.createElement("a");
var node = document.createTextNode(flag + ":");
//var para1=document.createElement(" ");
var para2 = document.createElement("input");
var para3 = document.createElement("br");
para.appendChild(node);
var parent = document.getElementById("parent");
var son1 = document.getElementById("son1");
parent.insertBefore(para, son1);
parent.appendChild(para);
//parent.appendChild(para1);
parent.appendChild(para2);
parent.appendChild(para3);
}
function removeDOM() {
var parent = document.getElementById("parent");
var son1 = document.getElementById("son1");
parent.removeChild(son1);
}
</script>
</head>
<body>
<div id="parent">
<div id="son1">
<font id="txt">:</font><input type="text" id="userName" name="userName"/>
</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>
</html>