javascript - Using jQuery to append as sibling rather than child element -

i can't seem find functionality i'm looking for. need append dom elements, siblings, disconnected node.

seems pretty straight forward, , according jquery documentation should able either .after() or .add(), neither word:

var $set = $('<div class="parent"></div>');     $set.add('<div class="child"></div>');     $set.add('<div class="child"></div>');     $set.add('<div class="child"></div>'); $('body').append($set); 

http://jsfiddle.net/kh9uj/17/ , http://jsfiddle.net/kh9uj/19/

it works if chain them using .add():

$('<div class="parent"></div>')     .add('<div class="child"></div>')     .add('<div class="child"></div>')     .add('<div class="child"></div>') .appendto('body'); 

http://jsfiddle.net/kh9uj/23/

but not .after(), , in application don't have option on chaining them. how can this?

edited fix class / id issue.

set not update variable

var $set = $('<div id="parent">0</div>'); $set = $set.add('<div id="child1">1</div>'); $set = $set.add('<div id="child2">2</div>'); $set = $set.add('<div id="child3">3</div>'); $('body').append($set); 

chaining works because adding them same object.

var $set = $('<div id="parent">0</div>')          //first element                .add('<div id="child1">1</div>')   //second element in object                .add('<div id="child2">2</div>')   //third                .add('<div id="child3">3</div>');  //fourth $('body').append($set); 

but add not adding parent. adding "siblings" when append it.

<parent /> <child1 /> <child2 /> <child3 /> 

if want "child" elements children of "parent" need use append.

var $set = $('<div id="parent">0</div>'); $set.append('<div id="child1">1</div>'); $set.append('<div id="child2">2</div>'); $set.append('<div id="child3">3</div>'); $('body').append($set); 

which results in

<parent>     <child1 />     <child2 />     <child3 /> </parent>