我可以克隆、编辑和附加 div 吗？

Question

我正在尝试找出是否可以使用 JS 克隆 HTML div，对其进行编辑并将其作为新元素再次附加。所以我的来源是，例如，这里的代码：

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
</div>

复制完这个元素后，我需要想办法改变新克隆输入的属性id，清除输入值并再次粘贴到包装器中，使其最后看起来像这样：

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
    <div class="element">
        <input id="test--2" value=""/>
    </div>
</div>

这对你有意义吗？如果是，我该如何完成？还是将内容分配给变量以附加它更好？我在这里寻找最好的方法，也许我的想法也是一个解决方案。

Answer 1

您可以使用纯 JavaScript 执行此操作，只需使用 cloneNode() 方法克隆 .element div，为克隆 div 分配新的 id 和值，最后使用 insertBefore() 方法将其附加回文档，例如这个：

let x = document.querySelector(".element");

let y = x.cloneNode(true);

y.children[0].id = "test--2";
y.children[0].defaultValue = "";

x.parentNode.insertBefore(y, x.nextSibling);

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
</div>

JSFiddle 上面的代码：https://jsfiddle.net/AndrewL64/jvc7reza/18/

Answer 2

基于this answer，您可以这样做：

$('#cloneBtn').on('click', function() {

  // get the last input having ID starting with test--
  var $inp = $('[id^="test--"]:last');  // Or use :first if you need
  // Get parent element 
  var $div = $inp.closest('.element');
  // Create clone
  var $div_clone = $div.clone();
  // Retrieve number from ID and increment it
  var num = parseInt($inp.prop("id").match(/\d+/g), 10) + 1;
  // Generate new number and assign to input
  $div_clone.find('[id^="test--"]').prop({id: 'test--' + num, value: ''});
  // Insert cloned element
  $div.after($div_clone);   // Or use .before() if you need 

});

.element {
  padding: 10px;
  outline: 2px solid #0bf;
}

<button id="cloneBtn">CLICK TO CLONE</button>

<div class="wrapper">
  <div class="element">
    <input id="test--1" value="ABC" />
  </div>
</div>

Once done inspect the input elements to see the new IDs

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

加扰元素、检索最高 ID、递增、克隆、追加。

如果您的 ID 编号被打乱，我们首先需要一种方法来检索最高 ID 号。这是纯 JavaScript 的实现：

function cloneElement () {
  
  const inpAll = document.querySelectorAll('[id^="test--"]');
  if (!inpAll.length) return; // do nothing if no elements to clone
  const maxID = Math.max.apply(Math, [...inpAll].map(el => +el.id.match(/\d+$/g)[0]));
  const incID = maxID + 1;
  const element = document.querySelector('.element'); // Get one for cloning
  const eleClone = element.cloneNode(true);
  const inpClone = eleClone.querySelector('[id^="test--"]');
  inpClone.id = 'test--'+ incID;
  inpClone.value = incID;              // just for test. Use "" instead
  document.querySelector('.wrapper').prepend(eleClone);
}


document.querySelector('#cloneBtn').addEventListener('click', cloneElement);

.element {
  padding: 10px;
  outline: 2px solid #0bf;
}

<button id="cloneBtn">CLICK TO CLONE</button>

<div class="wrapper">

  <div class="element">
    <input id="test--1" value="1" />
  </div>
  
  <div class="element">
    <input id="test--23" value="23" />
  </div>
  
  <div class="element">
    <input id="test--7" value="7" />
  </div>

</div>

Once done inspect the input elements to see the new IDs

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Answer 3

我不知道你知道什么数据，为什么你想做这样的事情但它可以做到:-)

一种方式是这样的：

const elemToCopy = document.getElementById("test--1").parentNode; // I assume you know id
const copiedElem = elemToCopy.cloneNode(true);

const newInput = copiedElem.querySelector("#test--1");
newInput.id = "test--2";
newInput.value = "";

elemToCopy.parentNode.append(copiedElem);

如果有不清楚的地方，请在评论中告诉我:-)

Answer 4

是的，使用 jQuery 的.clone()。

这是一个可能与您的情况相关的示例：

let newElement = $('.element').clone();

newElement.find('input').attr('id', 'test--2').val('');

$('.wrapper').append(newElement);

说明

在第一行中，我们使用 jQuery clone() 创建了一个新的克隆元素。

然后，我们发现它是子输入，更改它的 ID 并重置 val()。

最后，我们找到了.wrapper 元素并将新克隆的元素附加到它上面。