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>