목차
Javascript HTML DOM Elements (Nodes)
- description : Javascript HTML DOM Elements (Nodes)
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-03
The source of the article
Javascript HTML DOM Elements (Nodes)
Nodes(HTML 요소) 추가하고 제거하기
Creating New HTML Elements (Nodes)
HTML DOM에 새로운 요소를 추가하려면, 먼저 요소(요소 노드, element node)를 만든 후, 기존의 요소에 덧붙여야 합니다.
Example
<body> <div id="div1"> <p id="p1">This is a paragraph with #p1</p> <p id="p2">This is a another paragraph with #p2</p> <!-- This is the best. --> </div> <script> var para = document.createElement("P"); var node = document.createTextNode("This is the best."); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); </script> </body>
Example Explained
다음의 코드는 새로운 <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);
Creating new HTML Elements - insertBefore()
이전 예제의 appendChild() 메서드는 새로운 요소를 부모의 마지막 자식으로 덧붙였습니다.
원하지 않는 경우, insertBefore() 메서드를 사용할 수 있습니다.
Example
<body> <div id="div1"> <!-- This is new.가 생성됨. --> <p id="p1">This is a paragraph with #p1</p> <p id="p2">This is another paragraph with #p2</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> </body>
Removing Existing HTML Elements
HTML 요소를 제거하기 위해서는 remove() 메서드를 사용합니다.
Example
<body> <div> <p id="p1">This is a paragrahp with #p1</p> <!-- 버튼 클릭 시 #p1이 삭제됨--> <p id="p2">This is another paragrahp with #p2</p> </div> <button onclick="myFunction()">Remove Element</button> <script> function myFunction() { var elmnt = document.getElementById("p1"); elmnt.remove(); } </script> </body>
Example Explained
HTML 문서에는 두 개의 자식 노드 (두 개의 <p> 요소)를 가진 <div> 요소가 있습니다.
<div> <p id="p1">This is a paragraph with #p1</p> <p id="p2">This is another paragraph with #p2</p> </div>
삭제하려는 요소를 찾습니다.
var elmnt = document.getElementById("p1");
그 후, 해당 요소에 대한 remove() 메서드를 실행합니다.
elmnt.remove();
remove() 메서드는 이전 브라우저에서 작동하지 않습니다. 대신 removeChild()를 사용하는 방법에 대한 아래 예제를 참조하십시오.
Removing a Child Node
remove() 메서드를 지원하지 않는 브라우저의 경우, 요소를 제거하려면 부모 노드를 찾아야 합니다.
Example
<body> <div id="div1"> <p id="p1">This is a paragraph with #p1</p> <!-- #p1이 삭제됨 --> <p id="p2">This is another paragraph with #p2</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script> </body>
Example Explained
다음의 HTML 문서에는 두 개의 자식 노드 (두 개의 <p> 요소)를 가진 <div> 요소가 포함되어 있습니다.
<div id="div1"> <p id="p1">This is a paragraph with #p1</p> <p id="p2">This is another paragraph with #p2</p> </div>
id="div1"을 가진 요소를 찾습니다.
var parent = document.getElementById("div1");
id="p1"을 가진 <p> 요소를 찾습니다.
var child = document.getElementById("p1");
부모 요소에서 자식 요소를 삭제합니다.
parent.removeChild(child);
일반적인 해결 방법은 다음과 같습니다: 제거할 자식 요소를 찾고, parentNode 속성을 사용하여 부모를 찾습니다.
var child = document.getElementById("p1"); child.parentNode.removeChild(child);
Replacing HTML Elements
요소를 HTML DOM으로 바꾸려면 replaceChild() 메서드를 사용하십시오.
Example
<body> <div id="div1"> <p id="p1">This is a paragraph with #p1</p> <!-- This is new.로 변경됨 --> <p id="p2">This is another paragraph with #p2</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); /* <p>This is new.</p> */ parent.replaceChild(para, child); /* parent의 요소인 첫 번째 child를 para의 child로 변경한다. */ </script> </body>
