Copy/Clone div content to another div

Question

I need to copy content from div1 and paste/append it to div2 by click. Then if I change content in div1 and click the button again the content should go to div3 without changing the content in div2. This is what I found so far.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <p>Hello world</p>
</div>
<button onclick="$('#div2, #div3').html($('#div1').html());">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

Because I assign value it would paste the same in both divs and I have no idea how to do it separately. I guess some loops will be needed.

Is it possible and if it is could somebody give me some ideas or links to read materials. Thanks in advance!

how do you change the content in the div1 tag? if its a p tag then it wouldn't be possible to change it in the page — Kyle_397, Jun 26 '18 at 08:04

Saif · Answer 1 · 2018-06-26T08:28:22.913

You can use a variable to store the number of the div element and then increment it accordingly. (Here I am assuming only div2 and div3 are there)

Since you have not mentioned how the value of div1 is going to update. I am manually doing it using $('#div1').html("New Value"); inside the function add().

<html>
<body>
<body>
<div id="div1">
    <p>Hello world</p>
</div>
<button onclick="add()">Copy</button>
<div id="div2"><p>div1 Placeholder</p></div>
<div id="div3"><p>div2 Placeholder</p></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var n = 2;
function add(){
$('#div'+n).html($('#div1').html());
$('#div1').html("<p>New Value</p>");
n++;
}
</script>
</body>
</html>

Try running the snippet. Clicking the button once will put the value of div1 to div2 and then it changes the original content of div1 to New Value. Again if you click the button, the new value of div1 i.e., New Value will be put to div3.

Though this will also try to update div1 again to New Value, which won't make any change. It would be better if you write some other ways to update the div1 element.

Take care of the <p> tag if you want it to be retained. Well, that also depends on the way you update the value of div1.

To append you can use $('#div'+n).append($('#div1').html());

your answer was really helpful like the others. Thank You! Another question that I have is, can this be done through different pages? What I mean. If `div1` and `div2`/`div3` are in different pages. — A.G, Jun 26 '18 at 12:46
Read [this](https://stackoverflow.com/questions/21809815/change-content-of-a-div-on-another-page). — Saif, Jun 26 '18 at 16:15

Kaddath · Answer 2 · 2018-06-26T08:42:53.990

Using a script tag with javascript code as in Saif's answer is perfectly valid (you only should be careful not to overwrite the global var used to keep count). To be more inobtrusive the click event could also be added in the script tag.

As another possibility with the opposite approach, you could do all in the the button attributes, using jQuery's data. The count is here stored in an attribute in the button, but it could also be stored in the original div #div1. The code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <p>Hello world</p>
</div>
<button onclick="$('#div' + $(this).data('targetdiv')).html($('#div1').html()); $(this).data('targetdiv', $(this).data('targetdiv') + 1);" data-targetdiv="2">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

Some important notes about data: using data to change the value doesn't update the DOM attribute itself, because once the value is retreived from the attibute, jQuery uses an internal javascript code to keep the value. There's no real need to udate the DOM, but if you really want it to, you can use attr instead of data. But if you use attr, never mix it with calls to data, as the latter won't see the DOM updates after the first time it has retreived the value (because it uses the value stored in the internal javascript cache instead of reading the DOM attribute).

score 0 · Answer 3 · answered Jun 26 '18 at 08:36

I wrote a little help code to get you started. So what i did was to move the logic to a function which iterate a variable i (which can only take the value 2 and 3). This does not check if the text has changed and will overwrite div2 and div3 in turns on every click (remove if test if you only want to do it once).

<html>
<body>
<body>
<div id="div1">
    <p>Hello world</p>
</div>
<button onclick="copyPaste()">Copy</button>
<div id="div2"></div>
<div id="div3"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
   var i = 2;
   function copyPaste() {
      //add logic to check if text has changed before executing next line
      $(`#div${i++}`).html($('#div1').html());
      if(i < 3) i = 2; 
   }
</script>
</body>
</html>

Copy/Clone div content to another div

3 Answers3