父级不能 .append() .prepend() 相同的创建元素答案

【问题标题】：Parent cannot .append() .prepend() the same created element父级不能 .append() .prepend() 相同的创建元素
【发布时间】：2022-06-23 22:58:42
【问题描述】：

有兴趣知道是否有人可以帮助描述我所看到的行为的内部结构。

本质上，当创建一个新的 dom 元素（然后存储在一个 const 中）时，这个元素不能被追加和前置到同一个父元素。

例子：

const ul = document.querySelector('ul');
const button = document.querySelector('button');

button.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = 'new li';

    ul.prepend(li);
    ul.append(li);
});

这似乎是对append 或prepend 的最后一次调用，请注意，如果您最后调用 prepend，则新元素只会添加到ul 的开头。

深入研究，似乎克隆节点在随后的append/prepend 调用之前有效。

const li = document.createElement('li');
li.textContent = 'something new to do';
ul.prepend(li);

const newLi = li.cloneNode(true);
ul.append(newLi);

但是我很想知道它的内部工作原理以及为什么您似乎不能针对同一个元素进行调用？任何人都可以对此有所了解，因为 Mozilla 文档似乎没有对此有所了解。

小提琴：https://jsfiddle.net/gf7b0pom

谢谢大家！

【问题讨论】：

标签： javascript

【解决方案1】：

我认为这里的混淆可能是您对 const li = document.createElement('li'); 行中创建和存储的内容的理解。在这种情况下，li 不包含可以反复使用的模板——当您使用document.createElement() 时，您正在创建您选择的元素的单个实例。单个实例一次只能在一个地方。

打个比方，我相信您将li 想象成一个橡皮图章，可以在一张纸上的任何地方使用它来制作列表项。实际上，li 更像是一个贴纸——它一次只能出现在纸上的一个位置。运行时：

ul.prepend(li);
ul.append(li);

...就像您将列表项标签贴在列表的前面，然后将其剥离并贴在列表的后面。这就是为什么您需要致电.cloneNode(true) 的原因——它本质上是给您一个重复的贴纸，以便在其他地方使用。

【讨论】：