JavaScript实现动态添加、移除元素或属性的方法分析
本文实例讲述了javascript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下：
javascript 动态添加、移除元素
appendchild(newnode)向节点的子节点列表的末尾添加新的子节点。
insertbefore(newnode, existingnode)在已有子节点之前插入新的子节点。
removechild(node)删除元素的某个指定的子节点，并以 node 对象返回被删除的节点，如果节点不存在则返回 null。
innerhtml属性设置或返回表格行的开始和结束标签之间的 html。
测试用例
<html>
<head>
<style type="text/css">
.style1 { background-color:yellow; width:200px;height:100px;float:left;}
.style2 { background-color:#aa0; width:200px;height:100px;float:left;}
.style3 { background-color:rgb(0,200,200); width:200px;height:100px;float:left;}
.item-style {background-color:pink;}
</style>
<script type="text/javascript">
function addelement1() {
var container = document.getelementbyid("container1");
var elem1 = document.createelement("div");
elem1.setattribute("class", "item-style");
var textnode1 = document.createtextnode("appendchild");
elem1.appendchild(textnode1);
container.appendchild(elem1);
var middlechild = document.getelementbyid("middle-child");
var elem2 = document.createelement("div");
elem2.setattribute("class", "item-style");
var textnode2 = document.createtextnode("insertbefore");
elem2.appendchild(textnode2);
container.insertbefore(elem2, middlechild);
}
function addelement2() {
var container = document.getelementbyid("container2");
container.innerhtml = "<div>hello world \"2\"</div>";
}
function removenode() {
var container = document.getelementbyid("container3");
var mynode = document.getelementbyid("mynode");
container.removechild(mynode);
}
function operateelements() {
addelement1();
addelement2();
removenode();
}
</script>
</head>
<body onload="operateelements()">
<div id="container1" class="style1">
<div id="middle-child">middle child</div>
</div>
<div id="container2" class="style2"></div>
<div id="container3" class="style3"><p id="mynode">hello world</p></div>
<div style="clear:both;"/>
<button onclick="operateelements()">operate elements</button>
</body>
</html>
javascript 动态添加、移除属性
setattribute(attributename, attributevalue)添加指定的属性，并为其赋指定的值。将属性设置为undefined等同于删除。
removeattribute(attributename)删除指定的属性。
getattributenode(attributename)以 attr 对象返回指定属性名的属性值。
removeattributenode(attributenode)删除 attr 形式指定的属性，同时返回被删除的attr 形式的属性。
测试用例
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
function operateattributes() {
var node2 = document.getelementbyid("node2");
//设置font-style和font-size无效，这些属性脱离style单独设置是无效的
node2.setattribute("style", "color:red;");
var node3 = document.getelementbyid("node3");
node3.setattribute("font-size", undefined);
var node4 = document.getelementbyid("node4");
//font-style和font-size的remove无效，因为它们没有单独存在
node4.removeattribute("font-size");
var node5 = document.getelementbyid("node5");
//无法获取font-style和font-size
var attributenode = node5.getattributenode("style");
var attr = node5.removeattributenode(attributenode);
node5.innerhtml = "attr=" + attr + ", attr.name=" + attr.name + ", attr.value=" + attr.value;
}
</script>
</head>
<body onload="operateattributes()">
<p id="node0" style="font-style:italic;font-size:12px;">0 hello world</p>
<p id="node1" font-size="12px" font-style="italic">1 hello world : font-size、font-style等，这些属性脱离style单独设置是无效的</p>
<p id="node2" style="font-style:italic;font-size:12px;">2 hello world setattribute</p>
<p id="node3" style="font-style:italic;font-size:12px;">3 hello world setattribute</p>
<p id="node4" style="font-style:italic;font-size:12px;">4 hello world removeattribute</p>
<p id="node5" style="font-style:italic;font-size:12px;">5 hello world getattributenode & removeattributenode</p>
</body>
</html>
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript页面元素操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： BAT 特殊符号总结
下一篇： 局域网远程工具 服务器批量管理