appendTo failes on second call with two targets

SCRIPT

$(function() {

var commandLink = $("<span>[Command Link]</span>");

$("#container1").append(commandLink);

$(".container").append(commandLink);

});

HTML

<div id='container1' style='background-color: Yellow; padding:

10px;'></div>

<div id='container2' class='container' style='background-color: Pink;

padding: 10px;'></div>

<div id='container3' class='container' style='background-color: Lime;

padding: 10px;'></div>

If #container3 exists, all three get the new span added to them. If

#container3 is commented out, only #container2 gets the span added.

Both #container1 and #container2 should have the span added when #container3 is not present.

Attachments (0)

Change History (1)

I doubt that more than one div would get a span.

You're reinserting the same DOM ELEMENT over and over. That means, each time, it is removed from its actual parent and place inside the new one.

If you disagree, provide a test case (html file) clearly showing the problem.

Side navigation