Блог

Главная - Вопросы по программированию - Дублировать div по щелчку с помощью jquery

Дублировать div по щелчку с помощью jquery

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

В принципе, я хочу иметь возможность щелкнуть div с помощью класса click-to-add, а затем я хочу, чтобы добавить еще один div с дубликатом класса над div для добавления щелчка и непосредственно после первого дублированного div.

 <div class="site-table-row header">
   <div class="site-table-row duplicate">
      <div></div>
      <div></div>
      <div></div>
   </div>
   <div class="site-table-row">
      <div class="click-to-add">Click Me</div>
   </div>
</div>

Заранее благодарим вас за любую помощь / направление!

Ответ №1:

 $(document).ready(function (){
  $('button').click(function (){
        $('.header').append($('.header').html())
    
      /* console.log($('.header').html()); */
    })
  
  })  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-table-row header">
   <div class="site-table-row duplicate">
      <div>1</div>
      <div>1</div>
   </div>
   <div class="site-table-row">
      <button class="click-to-add">Click Me</button>
   </div>
</div>

Комментарии:

1. clone это лучший способ сделать это 🙂

Ответ №2:

Решаемая с помощью

 $('.click-to-add').click(function () {
   $('.duplicate').clone().insertAfter('.duplicate').last();
});

Ответ №3:

Я сделал это с помощью чистого js, но я думаю, что это может помочь вам, по крайней мере, с концепцией:

   <div class="site-table-row header">
   <div id="duplicatediv" class="site-table-row duplicate">
      <div></div>
      <div></div>
      <div></div>
   </div>
   <div class="site-table-row">
      <div class="click-to-add" onClick="addStuff();">Click Me</div>
   </div>
</div>

<script>
 const addStuff = () => {
   let div = document.getElementById('duplicatediv');
   var x = document.createElement("DIV");                      
var t = document.createTextNode("This is the duplicate.");    
x.appendChild(t);                                           
div.appendChild(x);   
 }

</script>

https://jsfiddle.net/s7epxLua/

он выбирает div с идентификатором с помощью getElementById, а затем добавляет к нему div.