JavaScript实现动态添加、移除元素或属性的方法分析
JavaScript 动态添加、移除元素
appendChild(newnode)
向节点的子节点列表的末尾添加新的子节点。
insertBefore(newnode, existingnode)
在已有子节点之前插入新的子节点。
removeChild(node)
删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。
innerHTML
属性设置或返回表格行的开始和结束标签之间的 HTML。
测试用例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<html> <head> <style type= "text/css" > .style1 { width:200px;height:100px;float:left;} .style2 { padding: 0px 0px 0px 5px; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: gray !important; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">#aa0; width:200px;height:100px;float:left;} .style3 { width:200px;height:100px;float:left;} .item-style {} </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 形式的属性。
测试用例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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> |