克隆div后更改按鈕的位置

Question

我有兩個功能，它們的作用是在按鈕的單擊上復制一個div，它工作正常，但是我希望在克隆div時，我單擊該按鈕以更改克隆的div下方的位置，因為該按鈕停留在原處，如何操作我能做到嗎？ 這是我的代碼：

 document.getElementById('CloneBtn').onclick = duplicate; var i = 0; var original = document.getElementById('duplicater'); function duplicate() { var clone = original.cloneNode(true); clone.id = "duplicetor" + ++i; original.parentNode.appendChild(clone); } 

 <div id="duplicater"> <p>Clone me</p> </div> <button type="button" id="CloneBtn" onlick="duplicate()">Clone Div</button> 

Answer 1

只需將#duplicater元素包裝在另一個容器中，然后將按鈕分開即可。 新元素將成為新克隆的parentNode ，並使它們保持井井有條。

 document.getElementById('CloneBtn').onclick = duplicate; var i = 0; var original = document.getElementById('duplicater'); function duplicate() { var clone = original.cloneNode(true); clone.id = "duplicetor" + ++i; original.parentNode.appendChild(clone); } 

 <div> <div id="duplicater"> <p>Clone me</p> </div> </div> <button type="button" id="CloneBtn" onlick="duplicate()">Clone 1</button> 

---

更新：在下面為您的評論添加標題。

 document.getElementById('CloneBtn').onclick = duplicate; var i = 1; var original = document.getElementById('duplicater'); function duplicate() { var clone = original.cloneNode(true); clone.id = "duplicetor" + ++i; original.parentNode.appendChild(clone); clone.insertAdjacentHTML('beforebegin', '<h3>Cloned</h3>'); } 

 <div> <div id="duplicater"> <p>Clone me</p> </div> </div> <button type="button" id="CloneBtn" onlick="duplicate()">Clone 1</button>