Replace only text inside a div using jquery

Question

I have a div like:


       
       "Hi I am text"

I am trying to change only the text from "Hi I am text" to "Hi I am replace" using jquery. This might be easy but I am not able to do it.

Using $('#one').text('') just empties the whole #One div.

user_7675935 · Answer

Just in case if you can't change HTML. Very primitive but short & works. (It will empty the parent div hence the child divs will be removed)

$('#one').text('Hi I am replace');




  
  "Hi I am text"

user_11455013 · Answer

I had the same problem but the text was the first node inside the parent element. In this case you can do something like this and it's really quick:

// find the children elements
 termsChildren = $('#one').children()

// replace the text, then re-append the children element.
 $('#one').text(' "Hi I am replace" ').append(termsChildren)

Otherwise, you have to specify which children have to go before the text, and which afterwards:


// find the children elements
 termsChildren = $('#one').children()

// remove all the content
 $('#one').text(' ')
// append the first child element
 $('#one').append(termsChildren[0])
// add the new text and then the other children
 $('#one').text(' "Hi I am replace" ').append(termsChildren.slice(1))

user_13887104 · Answer

When you replace the plain text of an element with jQuery, you cannot put the plain text on its own, or else it will clear and/or replace the entire element. You should put all the plain text inside a element:

$(document).ready(function() {
  $("#change-btn").click(function() {
    $("#one").children("span").text("Hi I am replace");
  });
});








  
    
    Hi I am text

Replace only text inside a div using jquery

8 Answers