How to change the text of li in ul without changing it's other properties?

Question

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!

Answer 1

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

Answer 2

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

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

Working Demo