问题
在写东西的时候用appendChild为li标签两次追加相同内容，结果却页面只出现了一个li标签
原因
appengChild是把一个元素（对象）追到到另一个元素上，但是这个追加其实是"剪切"的意思。也就是说，如果追加同一个元素（对象），实际上只是追加了一个元素，这就是我所出现的那个问题。
<body>
<ul id="list">
</ul>
<script>
var list = document.getElementById("list");
var li1 = document.createElement("li");
li1.innerHTML = 'a';
for(var i = 0; i < 3; i++) {
list.appendChild(li1);
}
</script>
</body>效果如图：多次追加同一元素（对象），页面只出现一个
或者换个方式来说，用appendChild为ul追加了一个li标签，li标签里面的内容是a，然后又追加了一个li，内容是b，再把内容为a的li标签重新追加一次，你会发现原来页面是a,b，但是现在却变成了b,a。
<body>
<ul id="list">
</ul>
<script>
var list = document.getElementById("list");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = 'a';
li2.innerHTML = 'b';
list.appendChild(li1);
list.appendChild(li2);
list.appendChild(li1);
</script>
</body>效果如下：
预期效果是a、b、a，但实际却是b、a。这就是所说的appendChild追加是一种"剪切"效果。追加同一个元素，第二次以后追加的不是没有作用，而是为只是处理同一个元素（对象），这样就会把之前有过一样的元素直接拿过来用，所以顺序不一样，就相当于"剪切"。
解决办法
写一个创建DOM对象函数，每次追加调用该函数
使用克隆节点（cloneNode）
创建函数如下：
<body>
<ul id="list">
</ul>
<script>
window.onload = function() {
function change(element, nodelist) {
var oDiv = document.createElement(element);
oDiv.innerHTML = nodelist;
return oDiv;
}
var list = document.getElementById("list");
list.appendChild(change("li", "a"));
list.appendChild(change("li", "b"));
list.appendChild(change("li", "a"));
}
</script>
</body>效果如图：
克隆节点如下：
<body>
<ul id="list">
</ul>
<script>
window.onload = function() {
var list = document.getElementById("list");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = 'a';
li2.innerHTML = 'b';
list.appendChild(li1);
list.appendChild(li2);
// cloneNode传递一个布尔值，true代表克隆，false不克隆
list.appendChild(li1.cloneNode(true));
}
</script>
</body>效果跟第种方法一样。
扫一扫
2216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
