How to set text without changing inner element in JQuery?

Question

I have this html

<h3 id="price">0.00<sup id="category">N/A</sup></h3>

I am using ajax to replace the <h3> tag and sup tag under the <h3> , but after setting the value using JQuery it replace all in a single,

here is my snippet;

$("#price").text('120.25');
$("#category").text('Bacon');

My result is only showing '120.25' ,and the category is not showing

How to solve this?

Answer 1

That's because you're modifying the h3 element. Instead have separate elements for each of your dynamic values and just update what you need.

 $("#price").text('120.25'); $("#category").text('Bacon');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h3><span id="price">0.00</span><sup id="category">N/A</sup></h3>

Answer 2

text() function recover all elements inside in the your <h3> tag. To achieve this you can prefer html() function and write it all at once.

#Solution 1

 function change(){ $("#price").html('120.25'+'<sup id="category">Bacon</sup>'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3 id="price">0.00<sup id="category">N/A</sup></h3> <button onClick='change();'>Change it </button>

#Solution 2

You can define all elements at the same level. For example;

<tag1>
  <insidetag1>Some Text Here</insidetag1>
  <insidetag2>Some Text Here</insidetag2>
</tag1>

If you prefer this solution, you can set texts with text() function selecting them seperately.

Answer 3

There are several ways this can be done, here I show some with a recommendation to alter the original markup with a span and manipulate that)

NOTE: This is really several answers in one to illustrate the differences.

<h3><span id="price-alter">0.00</span><sup id="category-alter">N/A</sup></h3>

 $(function() { // text at the start with original markup, NOTE it has text nodes of both let torig = $("#price").text(); // original text of node 0 let torigPrice = $("#price").contents().get(0).nodeValue; let torigCat = $("#category").text(); console.log("torig:", torigPrice, "|", torigCat); // direct maniplulation of price-2 and its child category-2 let torigone2 = $("#price-2").contents().get(0).nodeValue; $("#price-2").contents().get(0).nodeValue = "2.34"; $("#category-2").text("Butter"); // direct maniplulation another (yea, don't do this remove/re-add) $("#category-another").remove(); $("#price-another").text('786.32'); $("#price-another").append("<sup id='category-another'>Not Good<sup>"); // direct maniplulation of alternate markup and its child (probably the right way if you can) $("#price-alter").text("432.34"); $("#category-alter").text("Milk"); // clone the original, manipulate it and append it as new element (just to demonstrate) // most often best with "table" rows you want to clone and insert let myclone = $("#price").clone(true); // new id just to demonstrate (no dup id) myclone.attr("id", "#price" + "-new"); // text of the clone let cloneText = myclone.text(); // clone and remove the old category from the clone let savedCat = myclone.find('#category').clone(true); myclone.find('#category').remove(); // new id just to demonstrate (no dup id) savedCat.attr('id', 'category-new'); savedCat.text('New Cat Clone'); myclone.find('#category').remove(); // text of the new clone price myclone.text("123.67"); // add cloned category then append it back savedCat.appendTo(myclone); $('#new-markup').after(myclone); let tClone = myclone.text(); console.log("Values:", torig, "|", torig, "|", torigone2, "|", tClone, "|", $("#price-2").text()); // what you did originally $("#price").text('120.25'); $("#category").text('Bacon'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Original (whoops):</div> <h3 id="price">0.00<sup id="category">N/A</sup></h3> <div>Original (another):</div> <h3 id="price-another">0.00<sup id="category-another">N/A</sup></h3> <div>Alternate markup:</div> <h3><span id="price-alter">0.00</span><sup id="category-alter">N/A</sup></h3> <div>Original-2 textNode:</div> <h3 id="price-2">0.00<sup id="category-2">N/A</sup></h3> <div id="new-markup">NEW markup:</div>