-
[javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:41
JavaScript HTML DOM Elements (Nodes)
1. Creating New HTML Elements (Nodes)
HTML DOM에 새로운 요소를 추가하기 위해서, 먼저 요소를 생성하고, 존재하는 요소에 덧붙이면 됩니다.
1234567891011121314<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>cs 8번 라인은 <p> 요소를 새로 생성하는 코드입니다.
9번 라인은 8번에서 생성한 요소를 추가하기 전에, 텍스트 노드를 만드는게 먼저입니다. 텍스트 노드를 만드는 코드입니다.
10번 라인은 생성한 텍스트 노드를 <p> 요소에 붙이는 코드입니다.
12번 라인은 기존의 존재하는 div1 아이디를 가진 요소를 찾는 코드입니다.
13번 라인은 생성된 <p> 요소에 위에서 찾은 요소에 덧붙이는 코드입니다.
2. Creating new HTML Elements - insertBefore()
appendChild() 메소드는 새로운 요소를 부모의 마지막 자식으로 붙이는 메소드 입니다.
마지막 자식으로 붙이기 싫다면, insertBefore() 메소드를 사용하십시오.
12345678910111213141516171819202122<!DOCTYPE html><html><body><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></body></html>cs 3. Removing Existing HTML Elements
HTML 요소 제거를 위해서, 부모 요소를 알고 있어야 합니다:
1234567891011<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>cs HTML 문서는 2 개의 자식 노드를 갖는 <div> 요소를 가지고 있습니다.
8번 라인에서 div1 아이디를 갖는 요소를 찾습니다.
9번 라인에서 p1 아이디를 갖는 요소를 찾습니다.
10번 라인에서 div1의 자식인 p1을 제거합니다.
4. Replacing HTML Elements
HTML DOM 요소를 바꾸기 위해서, replaceChild() 메소드를 사용합니다:
1234567891011121314<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>cs 'Web > JavaScript' 카테고리의 다른 글
[javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
