CODEWITHSUNDEEP
jqueryappendwrapall
sage88
sage88

Reputation: 4564

jQuery append text inside of an existing paragraph tag

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

Upvotes: 27

Views: 141168

Answers (5)

Parsa Moloodi
Parsa Moloodi

Reputation: 1

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>

Upvotes: 0

طلحة
طلحة

Reputation: 405

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.

Upvotes: 2

msapkal
msapkal

Reputation: 8346

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

Upvotes: 53

Jude Duran
Jude Duran

Reputation: 2205

Try this

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

Upvotes: 5

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

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

Upvotes: 2

Related Questions