克隆<div>并更改其ID

Question

我应该如何使用 JavaScript 复制某个 <div> 并将其 ID 设为与原始 ID 不同。使用 jQuery 也可以。

- Timofey Trofimov

---

可能是重复的问题：如何克隆具有新ID的元素？ 和 最快的克隆元素和自动增量ID的方法（jQuery），还有更多类似的问题。在提出新问题之前，请先使用搜索功能。 - Felix Kling

非常抱歉。我猜我没有在搜索框中正确地形成问题。 - Timofey Trofimov

Answer 1

var div = document.getElementById('div_id'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);

- Sergii Stotskyi

---

纯 JavaScript？谢谢。 - Timofey Trofimov

根据 https://dev59.com/r2Up5IYBdhLWcg3wPFz_ ，事件处理程序不会被复制（如果侦听器是在HTML中内联添加的，则会被复制）。 - aamarks

Answer 2

使用方式：

JQuery

var clonedDiv = $('#yourDivId').clone();
clonedDiv.attr("id", "newId");
$('#yourDivId').after(cloneDiv);

- Mateusz Rogulski

---

$('#yourDivId').after(cloneDiv); 可能是更好的解决方案。 - Sem

Answer 3

我曾经遇到过同样的问题。我通过设置一个计数器并将其附加到ID上来解决了这个问题。希望这也能帮助你：

<script type="text/javascript">
     var counter = 1; //Set counter

function clone(sender, eventArgs) {
     var $row = $('#yourID');

     var $clone = $row.clone(); //Making the clone                      
     counter++; // +1 counter

     //Change the id of the cloned elements, append the counter onto the ID 
     $clone.find('[id]').each(function () { this.id += counter });
}
</script>

- Ryan Gavin

Answer 4

function contactCloseMe(element) {
  $(element).closest(".row").remove();
}

function contactAddMoreField(setion_id) {
  var container = $('#' + setion_id);
  var item = container.find('.contact-default').clone();
  item.find('input').val('');
  item.removeClass('contact-default').removeClass('d-none');
  item.appendTo(container).show();
  var newButton =
    '<button type="button" class="btn btn-danger btn-rounded btn-sm btn-icon" style="margin-top:-13px" onclick="contactCloseMe(this);"> <i class="bi bi-x"></i> </button>';
  item.find('div:last').show().append(newButton);
  $(this).closest('div').after(item);
}

<div class="col-sm-6">
  <div id="email_contact">
    <div class="row contact-default">
      <div class="col-sm-11">
        <div class="row">
          <label for="last_name">Email*</label>
          <div class="col-sm-12">
            <input type="email" id="email" placeholder="Enter Email" name="email" class="form-control flat" onchange="store_data(this)" value="{{ $provider->email }}" required>
          </div>
        </div>
      </div>
      <div class="col-sm-1 text-center mt-5"></div>
    </div>
  </div>
  <button type="button" class="btn btn-primary btn-sm flat float-end mt-3" onclick="contactAddMoreField('email_contact')">+ Add More Email</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- Rafiul Islam

---

我觉得你忘记按要求更改ID了。 - undefined

为了更好地帮助您，请提供有关您具体问题的更多细节。代码片段、错误信息或任何相关信息都会很有帮助。清晰简洁的问题会得到更快速和准确的回复。在您的问题中编辑具体内容，我将会继续协助您。要了解如何撰写良好的答案，请查看：如何撰写良好的答案。 - undefined

Answer 5

jQuery有一个clone()方法

var original = $("#original");
var newClone = original.clone();

- derki

---

这个回答如何回答问题？ - jdrake