jQuery append text inside of an existing paragraph tag

Question

I am trying to add additional text to the end of a paragraph using jQuery. My thought was to produce a structure like this:

Judging by my answers I will clarify. I need to create this structure first. And this is the part that I find difficult, not the second end result. So how do I dynamically create this:

<p>old-dynamic-text<span id="add_here"></span></p>

And then after adding the new text it would look like this:

<p>old-dynamic-text<span id="add_here">new-dynamic-text</span></p>

I've been playing with the .wrapAll() method, but I can't quite get the desired effect. Is this the best way to do this (and if so how), or is there another way to append new text to the end of an existing paragraph (that needs to be wrapped in some type of tag since I need to style it differently)?

Answer 1

Try this...

$('p').append('<span id="add_here">new-dynamic-text</span>');

OR if there is an existing span, do this.

$('p').children('span').text('new-dynamic-text');

DEMO

Answer 2

Try this

$('#add_here').text('new-dynamic-text');

Answer 3

If you want to append text or html to span then you can do it as below.

$('p span#add_here').append('text goes here');

append will add text to span tag at the end.

to replace entire text or html inside of span you can use .text() or .html()

Answer 4

I have just discovered a way to append text and its working fine at least.

 var text = 'Put any text here';
 $('#text').append(text);

You can change text according to your need.

Hope this helps.