js浏览器操作DOM之插⼊DOM
当我们获得了某个DOM节点，想在这个DOM节点内插⼊新的DOM，应该如何做？
如果这个DOM节点是空的，例如，<div></div>，那么，直接使⽤innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插⼊”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有⼦节点。
有两个办法可以插⼊新的节点。⼀个是使⽤appendChild，把⼀个⼦节点添加到⽗节点的最后⼀个⼦节点。例如：
<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
把<p id="js">JavaScript</p>添加到<div id="list">的最后⼀项：
var
js = ElementById('js'),
list = ElementById('list');
list.appendChild(js);
现在，HTML结构变成了这样：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>
因为我们插⼊的js节点已经存在于当前的⽂档树，因此这个节点⾸先会从原先位置删除，再插⼊到新的位置。
更多的时候我们会从零创建⼀个新的节点，然后插⼊到指定位置：
var
list = ElementById('list'),
haskell = ateElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
这样我们就动态添加了⼀个新的节点：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="haskell">Haskell</p>
</div>
动态创建⼀个节点然后添加到DOM树中，可以实现很多功能。
看个⼩例⼦吧，以下代码动态创建了⼀个<style>节点，然后把它添加都<head>节点的末尾，这样就动态的给⽂档添加了新的CSS定义：
var d = ateElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<script>
'use strict';
console.ElementsByTagName('head')[0]);
var d = ateElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
css最新
</script>
</head>
<body>
<p> 插⼊DOM测试</p>
</body>
</html>
结果：
这样是就使⽤JavaScript实现了css样式的动态创建。
insertBefore
如果我们要把⼦节点插⼊到指定的位置该怎么办？可以使⽤parentElement.insertBefore(newElement, referenceElement);⼦节点会插⼊到referenceElement之前.
看个例⼦：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<script>
'use strict';
</script>
</head>
<body>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
</body>
</html>
我们要把Haskell插⼊到Python之前：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
<script>
'use strict';
var list = ElementById('list'),
ref = ElementById('python'),
haskell = ateElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
</script>
</body>
</html>
结果：
可见，使⽤insertBefore重要是要拿到⼀个“参考⼦节点”的引⽤。很多时候，需要循环⼀个⽗节点的所有⼦节点，可以通过迭代children属性实现：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
<script>
'use strict';
var
i, c,
list = ElementById('list');
for (i = 0;i<list.children.length;i++){
c = list.children[i];
console.log(c);
console.log('sleep 1');
}
</script>
</body>
</html>
结果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。