JavaScript实现动态添加、移除元素或属性的方法分析
这篇文章主要介绍了JavaScript实现动态添加、移除元素的方法,结合实例形式分析了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"
div id="middle-child" Middle Child /div
/div
div id="container2" /div
div id="container3" p id="myNode" Hello World /p /div
div /
button 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" 0 Hello World /p
p id="node1" font-size="12px" font- 1 Hello World : font-size、font-style等，这些属性脱离style单独设置是无效的 /p
p id="node2" 2 Hello World setAttribute /p
p id="node3" 3 Hello World setAttribute /p
p id="node4" 4 Hello World removeAttribute /p
p id="node5" 5 Hello World getAttributeNode removeAttributeNode /p
/body
/html
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
