我多次尝试将相同的元素添加到 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**
DOM 操作方法喜欢insertBefore和appendChild移动元素，如果它们已经在 DOM 树中。这就是为什么最后只附加一个节点的原因。
如果您想创建三个不同的节点，那么您有几个选择。
1）。克隆节点。使用cloneNode您可以附加克隆节点而不是原始节点：
var elem = document.createElement('div')
elem.innerHTML = '**Child**';
document.body.insertBefore(elem.cloneNode(true), document.body.lastChild);
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);
| 归档时间： |
|
| 查看次数： |
1513 次 |
| 最近记录： |