javascript - Replace text inside li tag using jQuery - Stack Overflow

admin管理员组

文章数量:1324979

<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.

<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.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Mar 10, 2016 at 9:13 SanketSSanketS 97311 gold badge1313 silver badges3636 bronze badges 4

• 1 button would be outside li tag which i haven't mentioned but need to change text on html button click. – SanketS Commented Mar 10, 2016 at 9:17
• 1 Are there multiple li elements? If so, how do you determine which li should be affected from the button click? – Rory McCrossan Commented Mar 10, 2016 at 9:18
• @RoryMcCrossan, I can determine which li will be affected but i only need to change text of current li tag. – SanketS Commented Mar 10, 2016 at 9:28
• @SanketS but that's my point - how do you determine what the current li is? We need to see more of your code, both the HTML and your JS. – Rory McCrossan Commented Mar 10, 2016 at 9:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./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 ment 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./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>

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/o9va6mqe/

Working fiddle ^

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./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>

本文标签： javascriptReplace text inside li tag using jQueryStack Overflow