jquery를 사용하여 div 내의 텍스트 만 교체

다음과 같은 div가 있습니다.

<div id="one">
       <div class="first"></div>
       "Hi I am text"
       <div class="second"></div>
       <div class="third"></div>
</div>

jquery를 사용하여 "Hi I am text"에서 "Hi I am replace"로 텍스트 만 변경하려고합니다. 쉬울 수도 있지만 할 수 없습니다.

사용 $('#one').text('')하면 전체 #Onediv가 비워집니다 .

텍스트는 그 자체가 아니어야합니다. span요소에 넣으십시오 .

다음과 같이 변경하십시오.

<div id="one">
       <div class="first"></div>
       <span>"Hi I am text"</span>
       <div class="second"></div>
       <div class="third"></div>
</div>

$('#one span').text('Hi I am replace');

텍스트 노드 ( nodeType==3)를 찾아 다음을 바꿉니다 textContent.

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

라이브 예 : http://jsfiddle.net/VgFwS/

텍스트를 빈 문자열이 아닌 다른 것으로 설정해야합니다. 또한 .html () 함수는 div의 HTML 구조를 유지하면서이를 수행해야합니다.

$('#one').html($('#one').html().replace('text','replace'));

대체 할 텍스트를 실제로 알고 있다면 다음을 사용할 수 있습니다.

$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';

http://jsfiddle.net/5rWwh/

또는

$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';

$('#one').contents(':not(*)') 이 경우에는 요소가 아닌 자식 노드를 선택하고 두 번째 노드는 우리가 교체하려는 노드입니다.

http://jsfiddle.net/5rWwh/1/

또 다른 방법은 해당 요소를 유지하고 텍스트를 변경 한 다음 해당 요소를 다시 추가하는 것입니다.

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)

HTML을 변경할 수없는 경우를 대비하여. 매우 원시적이지만 짧고 작동합니다. (부모 div가 비워 지므로 하위 div가 제거됩니다)

$('#one').text('Hi I am replace');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one">
  <div class="first"></div>
  "Hi I am text"
  <div class="second"></div>
  <div class="third"></div>
</div>