하위 요소에 영향을 주지 않고 요소 내의 텍스트를 업데이트하려면 어떻게 해야 합니까?

하위 요소를 변경하지 않고 요소의 텍스트 변경

질문:

웹에서 요소의 텍스트를 동적으로 업데이트하는 경우가 자주 발생합니다. 개발자, 특히 복잡한 DOM 구조를 다룰 때 그렇습니다. 다음 HTML 스니펫을 고려하세요.

<div>

작업은 하위 단락에 영향을 주지 않고 굵은 텍스트를 수정하는 것입니다. 특히 jQuery 초보자에게는 어려운 작업입니다.

jQuery 솔루션:

Mark는 간결하고 효율적인 기능을 제공하는 jQuery를 사용하여 최적의 솔루션을 제공했습니다.

$("div#my-div").contents().filter(function() {
    return this.nodeType == 3; // Node type 3 represents text nodes
}).text("New Text");

자바스크립트 솔루션 (선택 사항):

순수 JavaScript에서는 childNodes 속성을 사용하여 텍스트 노드를 포함하여 요소의 모든 하위 노드에 액세스할 수 있습니다. 대상 텍스트가 항상 첫 번째 하위인 경우 다음 접근 방식을 사용할 수 있습니다.

var myDiv = document.getElementById("my-div");
var textNode = myDiv.childNodes[0]; // Assume the text is the first child
textNode.nodeValue = "New Text";

결론:

jQuery와 JavaScript를 모두 적용하여 동적으로 업데이트할 수 있습니다. 하위 요소를 유지하면서 요소의 텍스트를 삭제합니다. jQuery 솔루션은 간결하고 일반적인 접근 방식을 제공하는 반면, JavaScript 메서드는 텍스트가 첫 번째 자식이라고 가정하는 보다 구체적인 솔루션을 제공합니다.

위 내용은 하위 요소에 영향을 주지 않고 요소 내의 텍스트를 업데이트하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!