Copy DOM objects as new object with JQUERY

Asked

Viewed 120 times

0

I want to insert a copy of one content into two Ivs I made a clone and then wanted to make an append. Since append moves the contents of the last Insert in DOM.

var copia = $('div#conteudo').children().clone(true);

$('div#vazia1').append(copia);
$('div#vazia2').append(copia);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteudo">
    <p> meu conteudo </p>
</div>

<div id="vazia1">
    <p> vazia 1 </p>
</div>

<div id="vazia2">
    <p> vazia 2 </p>
</div>

The problem seems to me to be the issue of copying. Similar issue has already been addressed in How to create a copy of an object in Javascript? but the answer is still vague, perhaps complicated.

How to make a simple copy and not make a passage by reference? I show the problem in https://jsfiddle.net/bnascimento/j0xbs6qt/2/

I want to make a copy of DOM elements and modify the original without the copy receiving the changes. I want this copy to be a new element independent of the first. This is possible?

  • I found that: $('div#vazia1'). append(copia.clone(true); It works! But, I can’t explain why.

  • 1

    I’m not sure I understand, but it looks like you only made one copy and wanted to put it in two places. This does not even work since it is the same object and cannot be in two places at once. The way you see it now you’ve created a new clone, so solve it.

  • I can make a copy of an object with different references? The way I did does not give the appropriate result. I need to insert a new object which is a copy of another. You can see the error in https://jsfiddle.net/bnascimento/j0xbs6qt/1/

  • I think I really don’t understand. It would be interesting if you edited the question by asking, in addition to the fiddles, the expected output.

  • @Pablo made the change in the question. I hope it is clearer.

  • You clone once, and place the clone memos in two different places (in div#vazia1 and div#vazia2). You need to add to each of these div’s different clones.

  • OK @Viníciusgobboa.deOliveira can show an example of cloning (copying) an object and make them different? The idea is not to create new elements, but to copy what already exists and replicate elsewhere as a new element.

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.