26

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)?

sage88
  • 4,104
  • 4
  • 31
  • 41

4 Answers4

49

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

msapkal
  • 8,268
  • 2
  • 31
  • 48
  • I'm pretty sure that will append the span after the paragraph element, not into it. So it would end up

    rather than

    . Unless not adding the tags around the p causes it to behave differently (of that's just a typo?     – sage88 Apr 25 '13 at 03:25
  • added the fiddle link, check it out. – msapkal Apr 25 '13 at 03:27
  • I beleive the result will be

    if you use append.     – Jude Duran Apr 25 '13 at 03:32
  • Yeah I mean I can't see the DOM in fiddle, but it looks like that is true given his CSS. I will give this a try Mahesh! – sage88 Apr 25 '13 at 03:33
  • The problem with this solution is when `new-dynamic-text` contains HTML, which should be escaped. – Pawel Veselov Jul 11 '15 at 08:44
5

Try this

$('#add_here').text('new-dynamic-text');
Jude Duran
  • 2,195
  • 2
  • 25
  • 41
2

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()

Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
2

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.

طلحة
  • 375
  • 4
  • 8