추가 및 제거 노드 (HTML 요소)
만들기 새로운 HTML 요소 (노드)
되는 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> »그것을 자신을 시도 메소드 node.remove() 는 DOM 4 명세서에서 구현된다.
그러나 때문에 가난한 브라우저 지원, 당신은 그것을 사용할 수 없습니다.
예 설명
이 HTML 문서가 포함 <div> 두 개의 자식 노드 (두와 요소 <p> 요소) :
<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");
와 <p> 요소 찾기 id="p1" :
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> »그것을 자신을 시도