关于函数appendChild

        问题起因：

<div id="container">
    <div class="comment">
        <h3 class="name">UserName</h3>
        <p>Hello World</p>
    </div>
</div>

原意是想把.comment重复10次，于是在JavaScript中：

var container = document.querySelector('#container')
var comment = container.querySelector('.comment')
for (var i = 0; i < 10; i++) {
    container.appendChild(comment)
}

结果是，container里仍然只有一个comment。

---

 

　　开始纳闷了很久，调试发现for循环的确执行了10次，为什么元素没有重复10次呢？后来去MDN查appendChild()的API说明才知道：函数appendChild()的参数如果是已经存在的元素的引用，那么只把这个元素移到指定元素的末尾，而不会重复它。

所以：

container.appendChild(comment)

　　由于comment是元素的引用，所以只是把comment在container里原地移动了10次，才产生了没有重复10次的错觉。因此，要真正重复10次，只要使得appendChild()的参数不是对同一个元素的引用，而是一个新的元素就可以了。

---

 

 解决办法：

container.appendChild(comment.cloneNode(true))

这里cloneNode()的参数true是必须的。false只克隆节点本身，true克隆节点及其子节点。

---