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?

Any proficient programmer knows what they want to do. You want to add html to an existing html element. It't not about what you know, it's about what you know to search for. — The Muffin Man
– The Muffin Man, Commented Jul 8, 2012 at 8:16

Esailija · Accepted Answer · 2012-07-08 07:44:48Z

7

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

answered Jul 8, 2012 at 7:44

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tats_innit · Accepted Answer · 2012-07-08 08:07:17Z

0

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

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

answered Jul 8, 2012 at 7:50

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Your first example is a low level example of what you're 2nd example does.

@Nick Yep I was thinking any business logic might need more then that < I reckon > - thats why :) just lil extra info innit!

Tanveer · Accepted Answer · 2012-07-08 09:19:09Z

0

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

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

answered Jul 8, 2012 at 9:19

Tanveer

2,1073 gold badges25 silver badges41 bronze badges