I have a div like:
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>
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.
This question is related to
javascript
jquery
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');
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="one">_x000D_
<div class="first"></div>_x000D_
"Hi I am text"_x000D_
<div class="second"></div>_x000D_
<div class="third"></div>_x000D_
</div>
_x000D_
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'));
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"';
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.
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.
$('#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_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>
_x000D_
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)
Source: Stackoverflow.com