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

Question

我能够弄清楚如何用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>

这是我的javascript：

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);
}

小提琴 http://jsfiddle.net/kXmpY/803/

Answer 1

我建议使用appendChild()代替insertBefore()：

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

JS Fiddle demo

您也可以使用insertAdjacentHTML()，但坦率地说，在这种情况下它有点复杂（因为它需要一串HTML，而不是要插入的DOM节点）：

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

JS Fiddle demo

参考文献：

• Element.insertAdjacentHTML()。
• Node.insertBefore()。
• Node.nextSibling。