Latest web development tutorials

HTML의 DOM 요소

추가, 삭제 및 HTML 요소를 교체합니다.

새로운 HTML 요소 만들기 -에 appendChild ()를

되는 HTML DOM에 새 요소를 추가하려면 먼저 요소를 생성하고 기존 요소에 추가해야합니다.

예

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

»시도

분석의 예

이 코드는 새로운 <P> 요소를 생성합니다 :

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

의 <p> 요소에 텍스트를 추가하려면 먼저 텍스트 노드를 작성해야합니다. 이 코드는 텍스트 노드를 만듭니다

var node=document.createTextNode("This is a new paragraph.");

그런 다음 <P> 요소에 텍스트 노드를 추가해야합니다 :

para.appendChild(node);

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

기존 요소에이 코드를 찾기 :

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

이 코드는 기존의 요소에 새로운 요소를 추가합니다 :

element.appendChild(para);

새로운 HTML 요소 만들기 -에 insertbefore을 ()

에 appendChild의 한 예에 () 메소드 부모 요소의 마지막 자식 요소로 새로운 요소를 추가 할 수 있습니다.

당신이 원하지 않는 경우에 insertbefore () 메서드를 사용할 수 있습니다 :

예

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

»시도

기존의 HTML 요소를 제거

HTML 요소를 삭제하려면 요소의 부모 요소를 알고 있어야합니다 :

예

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


»시도

분석의 예

이 문서는 가진 두 개의 자식 노드 중 하나 (두 개의 <p> 요소)에서 HTML <div> 요소를 포함 :

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

ID = "div1"요소를 찾기 :

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

ID = "P1"의 <p> 요소를 찾기 :

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

부모 요소의 하위 요소에서 제거 :

parent.removeChild(child);

램프 나는 부모 요소를 참조하지 않는 경우 요소를 삭제할 수 있습니까?
미안 해요. DOM은 삭제할 요소뿐만 아니라 부모 요소를 이해할 필요가있다.

당신은 부모 요소를 찾아 제거하고 인 parentNode 속성을 사용할 필요가 하위 요소를 찾기 : 여기에 일반적인 솔루션입니다 :

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

HTML 요소를 교체

는 HTML DOM 요소를 교체하려면, replaceChild () 메서드를 사용합니다 :

예

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

»시도