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

Moll

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

Valentinvalentina

I'm pretty sure that will append the span after the paragraph element, not into it. So it would end up <p></p><span></span> rather than <p><span></span></p>. Unless not adding the tags around the p causes it to behave differently (of that's just a typo? – Moll

added the fiddle link, check it out. – Valentinvalentina

I beleive the result will be <p><span></span></p> if you use append. – Hospitalization

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! – Moll

The problem with this solution is when new-dynamic-text contains HTML, which should be escaped. – Incoherent

Answer 2

Try this

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

Hospitalization

Well then, see Mahesh Sapkal's solution. I beleive it will give you your desired result..;) – Hospitalization

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

Claimant

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.

Stibine

Answer 5

We can find the value of text input and append to P tag in jQuery.

$(document).ready(function() {
  // Event listener for the button click
  $(".addNoteButton").click(function() {
    // Get the value of the input field
    var addNoteInput = $(".addNoteInput").val();

    // Append the value as a <p> element to .yourNots
    $(".yourNots").append(`<p>${addNoteInput}</p>`);

    // Clear the input field after appending
    $(".addNoteInput").val("");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>Append Note Example</div>
<!-- Input field and button -->
<input type="text" class="addNoteInput">
<button class="addNoteButton">Add Note</button>

<!-- Container where notes will be appended -->
<div class="yourNots">
  <!-- Existing notes or new notes will be appended here -->
</div>

Loosestrife