jQuery: how to add an element after a text node?

Question

Say I have the following markup:

<h1>Hello</h1>

and now, I want to add <span id="foo" class="bar">world</span> after Hello so that I have I have the resulting markup:

<h1>Hello<span id="foo" class="bar">world</span></h1>

How do I do this in jQuery?

Answer 1

Hi you can do it simply by using .append statement i.e.

 $('#heading').append($('<span />').text(' World')); 

as illustrated here http://jsfiddle.net/R5CpP/1/

Answer 2

demo http://jsfiddle.net/3zc3N/3/ few ways you can achieve this or http://jsfiddle.net/3zc3N/6/

code

$("h1").html($('h1').text() + ' <span id="foo" class="bar">world</span>');

or

the one above: http://jsfiddle.net/3zc3N/

$("h1").append(' <span id="foo" class="bar">world</span>');

Answer 3

$("h1").append( '<span id="foo" class="bar">world</span>' )