为什么不能在两个 dom 元素中附加同一个孩子？

IT技术 javascript
2021-02-22 08:20:23

我只是注意到我做不到

var d1 = document.createElement('div');
var d2 = document.createElement('div');
var p = document.createElement('p');

d1.appendChild(p); // d1 has p now
d2.appendChild(p); // d2 has p now
// but where is p in d1 ?

有人会说这是逻辑，但好吧，当我第一次注意到我认为它是多么的不酷时。

为什么这不可能？

2个回答

该DOM是树结构。

当你附加一个元素时，你改变了它的父元素。

浏览器中的节点不仅仅是 P 中的文本（实际上，该字符串可以共享）。它还具有位置、尺寸、可见性、接收可能在子元素中触发的事件、将事件传播到其父元素等。这里的一切都取决于在树中的位置。就像许多 CSS 选择器一样。把它想象成两个地方的同一个元素没有多大意义，最好把它想象成两个节点，可能有一些相同的内容。

如果你想在两个地方有相同的内容，你必须克隆它。

好的，我明白了，克隆……但是克隆将删除一次在我的 dom 的几个部分中触发自定义事件的能力。我需要在不同的克隆上循环以一个接一个地触发自定义事件。
2021-04-22 08:20:23
非常感谢！这非常有帮助！
2021-05-17 08:20:23
是的，但是迭代具有一个类的元素既快速又容易：[].forEach.call(document.querySelectorAll('.myClass'), function(){ ...。
2021-05-18 08:20:23

jQuery 的appendTo()方法将“匹配元素集中的每个元素插入到目标的末尾”。试试这个：

p.appendTo(".div-class1, .div-class2")
请为您的答案插入更多描述。
2021-04-28 08:20:23
请通过编辑为您的答案添加一些解释，以便其他人可以从中学习
2021-05-09 08:20:23
其它你可能感兴趣的问题
上一篇(A == B == C) 比较在 JavaScript 中是如何工作的？ 下一篇Firefox 中的“事件”等价物