CODEWITHSUNDEEP
javascriptjqueryhtml
Max Koretskyi
Max Koretskyi

Reputation: 105497

why doesn't jquery insert created span into two divs?

I have the following html:

<div id="one"></div>
<div id="two"></div>

When I run the following code in jquery:

$(function () {
    var span  = $("<span>name</span>");
    $("#one").append(span);
    $("#two").append(span);
});

The span is added only to the last div:

<div id="one"></div>
<div id="two"><span>name</span></div>

I'd expect it to be added to the both divs, why it's not?

Upvotes: 0

Views: 64

Answers (6)

mohamedrias
mohamedrias

Reputation: 18566

Each DOM element can be connected to one specific parent. You can't append same DOM element to two DOM parents. Refer SO

In that case, you must clone the node.

   $(function () {
    var span  = $("<span>name</span>");
    $("#one").append(span);
    $("#two").append(span.clone());
});
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>

Upvotes: 3

Shaunak D
Shaunak D

Reputation: 20636

What happens is, your element does get appended to #one, but immediately it is again appended to #two

$(function () {
    var span  = $("<span>name</span>");
    $("#one").append(span);
    setTimeout(function(){
        $("#two").append(span);
    },2000)
});

Check this Fiddle with timeout

Use combined selector : appendTo('#one,#two')

Answer

$(function () {
    var span  = $("<span>name</span>");
    $(span).appendTo("#one,#two");
});

Demo

Upvotes: 1

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code it will work . DEMO

a DOM element can't append twice. 

$("<span>name</span>").appendTo("#one,#two");

Upvotes: 1

Suvabrata Roy
Suvabrata Roy

Reputation: 121

Hi you could try this also 

$(function () {
    var span  = $("<span>name</span>");
   $("#one").append(span);
    $("#two").append(span.html());
});

http://jsfiddle.net/72ky7o28/

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You need to use clone() 

var span  = $("<span>name</span>");
    $("#one").append(span);
    $("#two").append(span.clone());

Upvotes: 1

Aru
Aru

Reputation: 1870

update your script

$(function () {
    var span  = $("<span>name</span>");
    $("#one, #two").append(span);

});

Upvotes: 2

Related Questions