使用jQuery替换li标签内的文本

Question

<li ondblclick="editThisTag(this)" title="New Account0123" class="select2-selection__choice">
    <span class="select2-selection__choice__remove" role="presentation">×</span>
    Testing Text
</li>

I want to replace text inside <li> tag "Testing Text" on button click. <li> tag have <span> tag and normal text as child. <span> tag should remain as it is and only need to change "Testing Text" text on button click using jQuery.

Answer 1

Get the span inside the li then get the text node after to it and update the text

 $('#change').click(function() { $('li.select2-selection__choice') // get the span inside, and use `[0]` to get dom object .find('span')[0] // get next node after span, which is text node .nextSibling // update the text content with new value .textContent = 'text'; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="change">Change Text</button> <ul> <li ondblclick="editThisTag(this)" title="New Account0123" class="select2-selection__choice"> <span class="select2-selection__choice__remove" role="presentation">×</span> Testing Text </li> </ul> 

---

Or following method using contents() , filter() and replaceWith()

 $('#change').click(function() { $('li.select2-selection__choice') // get all nodes including text node and comment node .contents() // filter to get only text node and which is not empty .filter(function() { return this.nodeType === 3 && this.nodeValue.trim().length; }) // replace it with new text .replaceWith('text'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="change">Change Text</button> <ul> <li ondblclick="editThisTag(this)" title="New Account0123" class="select2-selection__choice"> <span class="select2-selection__choice__remove" role="presentation">×</span> Testing Text </li> </ul> 

Answer 2

Having a function to find the text you want to change.

jQuery("li").text(function () {
    return jQuery(this).text().replace("Testing Text", "hello world"); 
});

https://jsfiddle.net/o9va6mqe/

Working fiddle ^

Answer 3

Enclose with the tag the text you want to change so you can specify which part of li will be change. Do it like this.

 $('button#changeText').click(function() { $('li.select2-selection__choice').find('font').html('HELLO WORLD'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="changeText">Change Text</button> <li title="New Account0123" class="select2-selection__choice"> <span class="select2-selection__choice__remove" role="presentation">×</span> <font>Testing Text</font> </li>