0

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?

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • Why is an object being created at first place? typeOf span === object. Rather by just adding a string could have solved the issue. :-) var span = "name"; http://jsfiddle.net/to923zjc/ – Santosh Apr 10 '15 at 05:54
  • the question is not about how to insert the span into two divs, the question is _why_ it isn't inserted :) – Max Koretskyi Apr 10 '15 at 05:56
  • A object is automatically passed by reference, without the need to specifically state it. http://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value – Santosh Apr 10 '15 at 06:01
  • you're missing the point of the question, sorry... and again, in JS it's always pass by value, although the value can be either a primitive or a reference – Max Koretskyi Apr 10 '15 at 06:04

6 Answers6

3

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>
Community
  • 1
  • 1
mohamedrias
  • 18,326
  • 2
  • 38
  • 47
  • Thanks, "it's pass by reference" doesn't make much sense to me without specifying that each DOM node can have only one parent, like [this answer](http://stackoverflow.com/a/11673746/2545680) does. Please, expand you answer with this bit of information from the linked answer and I'll accept your answer. – Max Koretskyi Apr 10 '15 at 05:45
  • 1
    And it's pass by value still, although the value being a reference :) – Max Koretskyi Apr 10 '15 at 05:46
  • Updated it and added a link to that SO question as well. – mohamedrias Apr 10 '15 at 05:53
2

update your script

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

});
Aru
  • 1,840
  • 1
  • 12
  • 15
1

use below code it will work . DEMO

a DOM element can't append twice. 

$("<span>name</span>").appendTo("#one,#two");
Nishit Maheta
  • 6,021
  • 3
  • 17
  • 32
1

You need to use clone() 

var span  = $("<span>name</span>");
    $("#one").append(span);
    $("#two").append(span.clone());
Anoop Joshi P
  • 25,373
  • 8
  • 32
  • 53
1

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

Shaunak D
  • 20,588
  • 10
  • 46
  • 79
0

Hi you could try this also 

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

http://jsfiddle.net/72ky7o28/

Suvabrata Roy
  • 121
  • 6