다른 속성을 변경하지 않고 ul의 텍스트를 변경하는 방법은 무엇입니까?

Question

다음과 같이 ul에 li이 있습니다.

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

다음 코드로이 li의 텍스트를 변경하려고했습니다.

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

이 코드를 사용하면 텍스트가 잘 변경됩니다. 그러나 li 안에 input을 잃어 버렸습니다. 교체 전체를 어떻게 방지합니까 li?

또한 나는 stackoverflow에서 다음을 시도했다. change just text in li that contains img

그리고 난 다음과 같이 그것을 시도,

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

내 ul 클래스는 list-group입니다. 그러나 나는 실패했다. 어떻게 할 수 있니?

미리 감사드립니다. 도시 된 바와 같이

Answer 1

가장 간단한 해결책은 다음 셀렉터 등을 이용하여 스팬의 내용을 변경 span 내의 텍스트를 래핑하는

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>

하는 경우 즉, 가능한 다음 마크 업을 기반으로하지 않습니다, 당신은 당신의 li의 마지막 자식의 내용을 변경해야하므로

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

하면 .append()를 사용하여 시도 span 안의 텍스트를 래핑 :

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

Working Demo