Create a clone of a div element when clicked using jQuery

Question

Create a clone of a div element when clicked using jQuery

In simple terms, I would like to be able to click on the div tagged with the class click-to-add. Upon clicking, another div tagged with the class duplicate should be added above the click-to-add div and directly after the initial duplicate 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>

Your assistance or guidance in achieving this is greatly appreciated. Thank you!

javascript html jquery css

Answer 1

Answer №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>

Answer 2

$(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>

Answer 3

Answer №2

Resolved using

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

Answer 4

Resolved using

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

Answer 5

Answer №3

I created this using pure JavaScript, and while it may be of assistance to you in understanding the concept:

  <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>

Link to JSFiddle Example

This code snippet targets a specific div with an ID using getElementById and then adds a new div element to it.

Answer 6

I created this using pure JavaScript, and while it may be of assistance to you in understanding the concept:

  <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>

Link to JSFiddle Example

This code snippet targets a specific div with an ID using getElementById and then adds a new div element to it.

Create a clone of a div element when clicked using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Update the content of a bootstrap modal dialog following a successful upload

Unable to execute response

Improve the performance of your three.js project by utilizing JavaScript arrays instead of importing OBJ or GLTF files

Does CSS positioning change depending on the screen size?

Is there a way I can adjust the dimensions of this gallery?

How can we maintain the existing values of fields when using findOneAndUpdate() without replacing them with null if no new value is provided?

How to resolve useState problem in useEffect when state is not null

Leveraging geoPosition.js in conjunction with colobox

The 'id' property cannot be accessed because the data has not been retrieved successfully

Empowering user accessibility through intricate custom elements

The indicated processing instruction is incompatible with the provided payment source. PayPal's hosted fields for credit card payments do not support this specific processor

"Encountering an error message stating "Cannot access SpreadsheetApp.getUi() within this context" when attempting to execute the

Guide to sending client-to-client notifications in Angular/Ionic with Firebase Cloud Messaging

Set a variable in Node.js to capture the return value of res.json

Do websockets provide an effective solution for search box functionality?

What is the process for uploading contentBytes in chunks to a Graph URL generated by the createUploadSession Graph API?

Different ways to display the information of checked checkboxes outside of a div

I'm wondering why my socket.io emit isn't triggering a content update

Navigating through the portfolio items in Wordpress using a loop for the Next/

Issue with Axios Interceptor not correctly applying token from local storage on initial request