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>
|
