Replace only text inside a div using jquery

Question

I have a div like    lt div id  one  gt          lt div class  first  gt  lt  div gt          Hi I am text          lt div class  second  gt  lt  div gt          lt div class  third  gt  lt  div gt   lt  div gt    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 · Answer

You need to set the text to something other than an empty string  In addition  the  html   function should do it while preserving the HTML structure of the div       one   html     one   html   replace  text   replace

User · Answer

Just in case if you can t change HTML  Very primitive but short  amp  works   It will empty the parent div hence the child divs will be removed    x000D   x000D      one   text  Hi I am replace    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  one  gt  x000D     lt div class  first  gt  lt  div gt  x000D     Hi I am text  x000D     lt div class  second  gt  lt  div gt  x000D     lt div class  third  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Text shouldn t be on its own  Put it into a span element   Change it to this    lt div id  one  gt          lt div class  first  gt  lt  div gt          lt span gt  Hi I am text  lt  span gt          lt div class  second  gt  lt  div gt          lt div class  third  gt  lt  div gt   lt  div gt        one span   text  Hi I am replace

User · Answer

If you actually know the text you are going to replace you could use      one   contents   contains  Hi I am text     0  nodeValue     Hi I am replace      http   jsfiddle net 5rWwh   Or      one   contents   not      1  nodeValue     Hi I am replace          one   contents   not      selects non-element child nodes in this case text nodes and the second node is the one we want to replace   http   jsfiddle net 5rWwh 1

User · Answer

Another approach is keep that element  change the text  then append that element back  const star icon     li  find   stars svg     li  find   stars   text repo stargazers count  append star icon

User · Answer

Find the text nodes  nodeType  3  and replace the textContent      one   contents   filter function         return this nodeType    3    each function        this textContent   this textContent replace  Hi I am text   Hi I am replace         Note that as per the docs you can replace the hard-coded 3 in the above with Node TEXT NODE which is much clearer what you re doing   x000D   x000D      one   contents   filter function         return this nodeType    Node TEXT NODE     each function        this textContent   this textContent replace  Hi I am text   Hi I am replace        x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div id  one  gt          lt div class  first  gt  lt  div gt          Hi I am text          lt div class  second  gt  lt  div gt          lt div class  third  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

[javascript] Replace only text inside a div using jquery

Examples related to javascript

Examples related to jquery