javascript - 克隆 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

只需将您的 #duplicator 元素包装在另一个容器中，并将按钮分开。新元素将成为新克隆的 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>