Question

I have a HTML string that I convert to a JQuery node set:

var html = "<div id='foo'><div id='bar'></div></div>";
var nodes = $(html);

I want to add the content <div id="baz"></div> immediately after <div id='bar'></div>. I tried using:

nodes.find('#bar').prepend('<div id="baz"></div>'); 

But this yields the result:

<div id="foo">
  <div id="bar">
    <div id="baz"></div>
  </div>
</div

But what I want is:

<div id="foo">
  <div id="bar"></div>
  <div id="baz"></div>
</div>

Answer 1

nodes.append('<div id="baz"></div>'); 

or…

$('<div>',{id:"baz"}).appendTo(nodes);