I have a li in a ul like following.

<li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window">Navigate Window</li>

I tried to change a text of this li with the following code.

$('#list1 #' + selectedId).text('abcd');

Using this code, the text is changing fine. But it losts the input inside the li. How do I prevent the replacing whole li?

And also I tried with the following in stackoverflow. change just text in li that contains img

And i tried it like following,

$("ul.list-group > li.list-group-item > span.thetext").html('abcd');

My ul class is list-group. But i failed. How can do this?

Thanks in Advance!

I have a li in a ul like following.

<li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window">Navigate Window</li>

I tried to change a text of this li with the following code.

$('#list1 #' + selectedId).text('abcd');

Using this code, the text is changing fine. But it losts the input inside the li. How do I prevent the replacing whole li?

And also I tried with the following in stackoverflow. change just text in li that contains img

And i tried it like following,

$("ul.list-group > li.list-group-item > span.thetext").html('abcd');

My ul class is list-group. But i failed. How can do this?

Thanks in Advance!

• javascript
• jquery
• html
• html-lists

Share Improve this question Follow edited May 23, 2017 at 10:33 CommunityBot 111 silver badge asked Sep 17, 2014 at 7:32 codebotcodebot 2,66633 gold badges4444 silver badges9595 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The easiest solution is to wrap the text within a span then change the contents of the span using a selector like

var selectedId = '1909';
$('#list1 #' + selectedId + ' span').text('abcd');

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
  <li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window"><span>Navigate Window</span></li>
</ul>

If that is not possible, then based on your markup, you need to change the contents of the last child of your li so

var selectedId = '1909';
$('#list1 #' + selectedId).contents().last().text('abcd');

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
  <li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window"><span>Navigate Window</span></li>
</ul>

Try using .append() and wrap the text inside span as shown :

 $('#list1 #' + selectedId).append('<span>abcd</span>');

Working Demo