将两个相同的节点添加到不同的 HTML 元素答案

【问题标题】：Adding two identical nodes to different HTML elements将两个相同的节点添加到不同的 HTML 元素
【发布时间】：2023-04-08 06:38:01
【问题描述】：

我正在使用createElement创建一个表，例如：

var tbl = document.createElement('table');

我以相同的方式创建正文、行和单元格。我想将完全相同的表输出到两个不同的 HTML 元素。我们称它们为 ele1 和 ele2。

var elements = ['ele1', 'ele2'];

for (var i = 0; i < elements.length; i++) {
   tbl.id = "table_" + i; //set the ID so they differ for each table instance
   document.getElementById(ele).appendChild(tbl);
}

但是，表格只出现在最后一个元素中。我不知道如何复制表格。

我已经为它工作的每个元素从头开始创建了整个表，但我试图避免不必要的处理。

【问题讨论】：

.appendChild() 将移动一个元素。如果你想要一个节点的副本，你必须“克隆”一个节点。
请注意，我们更喜欢这里的技术写作风格。我们轻轻地劝阻问候，希望你能帮助，谢谢，提前感谢，感谢信，问候，亲切的问候，签名，请你能帮助，聊天材料和缩写 txtspk，恳求，你多久了被卡住、投票建议、元评论等。只需解释您的问题，并展示您尝试过的内容、预期的内容以及实际发生的情况。

标签： javascript html appendchild createelement

【解决方案1】：

使用cloneNode:

document.getElementById(ele).appendChild(tbl.cloneNode(true));

【讨论】：

我希望这样的东西会存在！我是否可以在单个节点上使用克隆节点，还是必须在使用前确定我需要多个节点？
它适用于您要附加的任何节点，正如 cmets 中所指出的，使用 appendChild 只会移动您的节点。更多信息here
谢谢！你有我永远的感激之情