在原始元素下使用Javascript复制html

我能够想出如何用javascript复制html。但是，我不知道如何直接在原始复制的html下面复制html。现在它将进入页面底部

这是我的html:

<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>
<button id="button" onlick="duplicate()">Click me</button>
<div class="blank">
    The duplicated info should stay above this.
</div>

document.getElementById('button').onclick = duplicate;


var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

小提琴

---

我建议使用

insertBefore（）

代替

appendChild（）

：

您也可以使用

insertAdjacentHTML（）

，不过坦率地说，在这种情况下有点复杂（因为它需要一个HTML字符串，而不是一个DOM节点来插入）：

参考资料：

---

谢谢你的建议。我只是试了一下，但现在不行了。啊，我明白你的意思了。对不起，我把我的推荐信弄错了；它应该是（现在是）要插入的内容，后跟节点引用。修正后，提供了一个演示。太棒了！谢谢@David ThomasYou真的很受欢迎，我很高兴能帮上忙！：）再次感谢！也许你能帮我解决一个小问题。我正在尝试将此信息存储到帖子中。但是，使用相同的名称创建多个输入等似乎会引起问题。你能帮我解决这个问题吗？谢谢你的帮助！另外，如何删除额外的标签名称，以便仅显示第一个标签名称？

original.parentNode.insertBefore(clone, original.nextSibling);

original.insertAdjacentHTML('afterend',clone.outerHTML);