JavaScript 및 jQuery에서 하위 요소에 영향을 주지 않고 텍스트 콘텐츠를 업데이트하는 방법은 무엇입니까?

텍스트 조작: 하위 요소 보존

질문:

하위 요소에 영향을 주지 않고 요소의 텍스트를 동적으로 업데이트하려면 어떻게 해야 합니까? 강요? 다음 HTML을 고려하세요.

<div>
   **text to change**
   <somechild>
       text that should not change
   </somechild>
   <somechild>
       text that should not change
   </somechild>
</div>

jQuery 초보자라면 추가 텍스트 컨테이너를 도입하지 않고도 이 작업을 수행할 수 있는 적절한 함수나 선택기를 찾으세요.

답변:

jQuery는 이러한 조작을 위한 고급 방법을 제공하지만 바닐라 JavaScript를 사용하여 솔루션을 사용할 수도 있습니다. childNodes 속성은 텍스트 노드를 포함하여 요소 내의 모든 노드에 대한 액세스를 제공합니다.

예를 들어 변경될 텍스트가 항상 div의 첫 번째 요소인 경우 다음 코드를 사용할 수 있습니다.

var divElement = document.getElementById('your_div');
var textNode = divElement.childNodes[0];

textNode.nodeValue = 'new text';

또는 jQuery를 사용하여 div를 대상으로 하고 텍스트 노드에 대한 참조를 얻을 수 있습니다.

var divElement = $('your_div').get(0);
var textNode = divElement.childNodes[0];

textNode.nodeValue = 'new text';

이 방법은 효과적으로 업데이트됩니다. 하위 요소의 원래 구조와 콘텐츠를 유지하면서 텍스트 콘텐츠를 삭제합니다.

위 내용은 JavaScript 및 jQuery에서 하위 요소에 영향을 주지 않고 텍스트 콘텐츠를 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!