Update the text inside a paragraph using jQuery

Question

Update the text inside a paragraph using jQuery

When attempting to modify two values within a paragraph using jQuery, I encountered an issue where only one value was successfully updated, leaving the other empty.

<div class="container">
<p class="lead custom_bg" id="comment"> updateme!
    <code id="source"> updateme2!</code>
</p>
</div>

Utilizing jQuery ajax

success: function(response){
         $('#comment').text(response['comment']);
         $('#source').text(response['source']);
     }

From my perspective, it appears that the .text attribute modifies all text within the specified paragraph.

javascript jquery html css ajax

Answer 1

Answer №1

The problem arises when you set the text() of the #comment, as it removes all the HTML content within that element, causing the #source to disappear.

To solve this issue, you should update the value of the first text node within #comment specifically, like so:

var response = {
  comment: 'updated comment',
  source: 'updated source'
}

$('#comment').contents()[0].nodeValue = response['comment'];
$('#source').text(response['source']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="lead custom_bg" id="comment"> updateme!
    <code id="source"> updateme2!</code>
  </p>
</div>

Alternatively, you can enclose the desired text in a separate span for direct targeting, like this:

var response = {
  comment: 'updated comment',
  source: 'updated source'
}

$('#comment span').text(response['comment']);
$('#source').text(response['source']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="lead custom_bg" id="comment"> 
    <span>updateme!</span>
    <code id="source"> updateme2!</code>
  </p>
</div>

Answer 2

The problem arises when you set the text() of the #comment, as it removes all the HTML content within that element, causing the #source to disappear.

To solve this issue, you should update the value of the first text node within #comment specifically, like so:

var response = {
  comment: 'updated comment',
  source: 'updated source'
}

$('#comment').contents()[0].nodeValue = response['comment'];
$('#source').text(response['source']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="lead custom_bg" id="comment"> updateme!
    <code id="source"> updateme2!</code>
  </p>
</div>

Alternatively, you can enclose the desired text in a separate span for direct targeting, like this:

var response = {
  comment: 'updated comment',
  source: 'updated source'
}

$('#comment span').text(response['comment']);
$('#source').text(response['source']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="lead custom_bg" id="comment"> 
    <span>updateme!</span>
    <code id="source"> updateme2!</code>
  </p>
</div>

Answer 3

Answer №2

Implement this to instantly generate the necessary element in the following line

$('#comment').html(response['comment']+'<code id="source"></code>');         
$('#source').html(response['source']);

Updated: .text() changed to .html()

Answer 4

Implement this to instantly generate the necessary element in the following line

$('#comment').html(response['comment']+'<code id="source"></code>');         
$('#source').html(response['source']);

Updated: .text() changed to .html()

Answer 5

Answer №3

To prevent the destruction of HTML content when setting text, one workaround is to store the inner HTML (e.g., #source) and re-append it after setting the text.

In this example, I have substituted the response section with placeholder text, so you will need to add back the variables accordingly.

var keepMe = $('#source');
$('#comment').text("hello");
$('#comment').append(keepMe);
$('#source').text("hello again!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lead custom_bg" id="comment"> update me!
    <span id="source"> update me too!</span>
</p>
</div>

Answer 6

To prevent the destruction of HTML content when setting text, one workaround is to store the inner HTML (e.g., #source) and re-append it after setting the text.

In this example, I have substituted the response section with placeholder text, so you will need to add back the variables accordingly.

var keepMe = $('#source');
$('#comment').text("hello");
$('#comment').append(keepMe);
$('#source').text("hello again!");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lead custom_bg" id="comment"> update me!
    <span id="source"> update me too!</span>
</p>
</div>

Update the text inside a paragraph using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

The jQuery .animate function seems to be malfunctioning

Removing an object in Three.js using scene.getObjectByName() method

What is the process for retrieving a value from a Django view?

Guide on how to use JavaScript to upload media stream recorder blobs onto YouTube using the YouTube API

What is the method for updating the inner html of an image tag in HTML?

A guide to reordering table rows by drag-and-drop with JavaScript

Guide on implementing factory updates to the display

JavaScript: Modify the dropdown class with a toggle option

Tips for incorporating tabs using jQuery

How can I receive the response from a GET request using React Query? I am currently only able to get the response

Is there a term in JavaScript that denotes an object that can be serialized into JSON format?

Creating an array in Javascript and populating it with dynamically generated values

Is it possible to include a link at the conclusion of an Angular Material autocomplete input field?

Placing pins on Google Maps

Error encountered while trying to call callback functions

Avoid having #content overlap by using a double sidebar layout

What is the best way to showcase the chosen items in a dropdown menu?

What is the procedure to alter the color of XYChart in JavaFx?

Trouble generating document with Firebase setDoc()

The combination of Asp.net and Bootstrap offers a powerful