克隆数据时指定目标？答案

【问题标题】：Specify targets when cloning data?克隆数据时指定目标？
【发布时间】：2014-07-23 16:40:45
【问题描述】：

我正在制作一个代码生成器，它将为您提供文本 sn-p 的代码。有一个自定义面板，您可以在其中设置文本格式。当您生成代码时，它会根据您在面板中输入的内容打印它。如果您想在同一行中使用多种格式，则需要两个或更多自定义面板，这可以使用“添加面板”按钮来实现。

但问题来了：当我在面板中克隆时，无论我尝试什么，我都无法在数据中指定要克隆的目标。它总是在底部做。

这是我使用的代码的 sn-p：

<!--What gets cloned!-->
<div id="duplicate">
    <input type="radio"/>
</div>
<!--What triggers the cloning function!-->
<input type="button" value="Clone Radio Button" onclick="dup()"/>
<!--This is the id that I want to paste the data to!-->
<p id="paste"></p>
<!--This is just text to prove that it appears at the bottom!-->
<h1>The radio button will clone below me!</h1>
<script>
    //This will take the id of the div tag, look at its data, and copy that data to the
    //bottom of the page
    function dup() {
        var clone = document.getElementById("duplicate"),
        clone2 = clone.cloneNode(true);
        document.body.appendChild(clone2)
    }
</script>

如您所见，所有这些都是获取 div 标签的数据并将其克隆到其他地方，就像“添加面板”按钮一样。它只是不是 100% 有效。

如果你知道我的问题的答案，你能用正确的标签写出我的函数吗？那将是真棒。如您所见，我希望将其粘贴在 p 标签上，其中显示 id="paste"。

我希望有人知道答案。这是一个简单的概念，将 div 标签的数据粘贴到所需的位置，但对我来说，这很重要。谢谢！

编辑：感谢许多人，我发现我正在“在函数中”进行克隆，因此当我将孩子附加到 DOCUMENT.GETELEMENTBYID 时，我必须直接这样做：)

【问题讨论】：

呃，document.getElementById('paste').appendChild(clone2)?但是你不能将 div 附加到 p 上。
完全正确。好吧，我知道我发现了一件事：我很愚蠢！但说真的，非常感谢。你解决了一个我无法解决的问题。顺便说一句，就我而言，我可以将 div 附加到 p 标签
别担心，会发生错误！

标签： javascript code-generation cloning

【解决方案1】：

您可以指定您的 div id，而不是将复制的文本附加到 body 标签。

document.getElementById("paste").appendChild(clone2);

【讨论】：

【解决方案2】：

您当前正在将克隆的节点附加到文档的正文中；

document.body.appendChild(clone2)

如果要将其附加到 ID 为 paste 的元素，只需将该行更改为；

document.getElementById('paste').appendChild(clone2)

【讨论】：