Question

我尝试多次将相同的元素添加到HTML文档中，但它不起作用，我不知道原因。代码如下：

<html>
<body>

<div>Very</div>
<div>Secret</div>
<script>
  var elem = document.createElement('div')
  elem.innerHTML = '**Child**'

  document.body.insertBefore(elem,document.body.lastChild);
  document.body.insertBefore(elem,document.body.lastChild);
  document.body.insertBefore(elem,document.body.lastChild);
</script>
</body>
</html>

结果为何

  Very
  Secret
**Child**

而不是

  Very
  Secret
**Child**
**Child**
**Child**

Answer 1

像insertBefore和appendChild这样的DOM操作方法会移动元素（如果它们已经在DOM树中）。这就是为什么你最终只有一个节点附加到最后。

如果要创建三个不同的节点，那么您有几个选项。

<强> 1）。克隆节点。使用cloneNode，您可以附加克隆节点而不是原始节点：

var elem = document.createElement('div')
elem.innerHTML = '**Child**';

document.body.insertBefore(elem.cloneNode(true), document.body.lastChild);

演示：http://jsfiddle.net/xh3nqe85/

<强> 2）。字符串作为模板。您可以附加HTML字符串而不是NodeElement。这种操作最方便的方法是insertAdjacentHTML：

var elem = '<div>**Child**</div>';
document.body.lastElementChild.insertAdjacentHTML('afterend', elem);
document.body.lastElementChild.insertAdjacentHTML('afterend', elem);
document.body.lastElementChild.insertAdjacentHTML('afterend', elem);

演示：http://jsfiddle.net/xh3nqe85/1/

Answer 2

你应该创建三次元素。

按照您的方式，您只需创建一个元素并将其设置三次：

    function myFun() {
        var elem = document.createElement('div')
        elem.innerHTML = '**Child**'
        return elem;
    }
    document.body.insertBefore(myFun(), document.body.lastChild);
    document.body.insertBefore(myFun(), document.body.lastChild);
    document.body.insertBefore(myFun(), document.body.lastChild);

http://jsfiddle.net/6zppunvv/

Answer 3

将节点附加到其他节点时，您不会克隆它。

请参阅 Node.cloneNode 方法以实际克隆节点。

Answer 4

尝试克隆节点。

var elem = document.createElement('div')
elem.innerHTML = '**Child**'

document.body.insertBefore(elem,document.body.lastChild);
document.body.insertBefore(elem.cloneNode(true),document.body.lastChild);
document.body.insertBefore(elem.cloneNode(true),document.body.lastChild);

Javascript insertBefore方法不能使用相同的子节点多次调用？

4 个答案:

演示：http://jsfiddle.net/xh3nqe85/

演示：http://jsfiddle.net/xh3nqe85/1/