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.
Text shouldn't be on its own. Put it into a span
element.
Change it to this:
<div id="one">
<div class="first"></div>
<span>"Hi I am text"</span>
<div class="second"></div>
<div class="third"></div>
</div>
$('#one span').text('Hi I am 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');
});
Live example: http://jsfiddle.net/VgFwS/
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.
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');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
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'));
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)
©2020 All rights reserved.