HTML DOM 요소 추가 또는 제거

DOM(Document Object Model)은 확장 가능한 마크업 언어 처리를 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스입니다. 웹 페이지에서는 페이지(또는 문서)를 구성하는 객체들이 트리 구조로 구성되어 있습니다. 문서 내 객체를 표현하는 데 사용되는 표준 모델을 DOM이라고 합니다. HTML DOM 요소를 삭제하세요. 지금 와서 배워보세요.

새 HTML 요소 만들기

HTML DOM에 새 요소를 추가하려면 먼저 요소(요소 노드)를 만든 다음 해당 요소를 기존 요소에 추가해야 합니다.

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

이 코드는 새로운

요소를 생성합니다.

var para=document.createElement("p");

요소에 텍스트를 추가하려면 먼저 텍스트 노드를 생성해야 합니다. 이 코드는 텍스트 노드를 생성합니다:

var node=document.createTextNode("这是一个新段落。");

그런 다음

요소에 텍스트 노드를 추가해야 합니다.

para.appendChild(node);

마지막으로 기존 요소에 새 요소를 추가해야 합니다.

이 코드는 기존 요소를 찾습니다.

var element=document.getElementById("div1");

다음 코드는 기존 요소 뒤에 새 요소를 추가합니다.

element.appendChild(para);

기존 HTML 요소를 삭제합니다.

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

부모 요소를 참조하지 않고 수행할 수 있는 경우 다음과 같습니다. 요소를 삭제하면 좋습니다.
그런데 아쉽네요. DOM은 삭제해야 하는 요소와 해당 상위 요소를 알아야 합니다.

이것은 일반적인 해결 방법입니다. 삭제하려는 하위 요소를 찾은 다음 해당 parentNode 특성을 사용하여 상위 요소를 찾습니다.

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

위는 HTML dom 요소 추가 또는 제거에 대한 관련 튜토리얼입니다. 그럴 수 있기를 바랍니다. 모두를 도와주세요.

관련 권장 사항:

DOM을 사용하여 이벤트를 할당하는 방법

DOM 노드 삭제에서 비어 있는 것과 제거의 차이점

jQuery로 DOM을 작동하는 방법

위 내용은 HTML DOM 요소 추가 또는 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!