======Javascript HTML DOM Elements (Nodes)======
This is a paragraph with #p1 This is a another paragraph with #p2
=====Example Explained=====
다음의 코드는 새로운 ''%%
%%'' 요소를 생성합니다.\\
var para = document.createElement("p");
\\
''%%
%%'' 요소에 텍스트를 추가하기 위해, 텍스트 노드를 먼저 생성해야 합니다. 다음의 코드는 텍스트 노드를 생성합니다.\\
var node = document.createTextNode("This is a new paragraph.");
\\
이후, ''%%
%%'' 요소에 텍스트 노드를 덧붙여야 합니다:\\
This is a paragraph with #p1 This is another paragraph with #p2 This is a paragrahp with #p1 This is another paragrahp with #p2
para.appendChild(node);
\\
마지막으로, 기존의 요소에 새로운 요소를 덧붙여야 합니다.\\
다음의 코드는 기존 요소를 찾습니다.\\
var element = document.getElementById("div1");
\\
다음의 코드는 기존 요소에 새로운 요소를 덧붙입니다.\\
element.appendChild(para);
=====Creating new HTML Elements - insertBefore()=====
이전 예제의 ''%%appendChild()%%'' 메서드는 새로운 요소를 부모의 마지막 자식으로 덧붙였습니다.\\
\\
원하지 않는 경우, ''%%insertBefore()%%'' 메서드를 사용할 수 있습니다.\\
====Example====
=====Removing Existing HTML Elements=====
%%HTML%% 요소를 제거하기 위해서는 ''%%remove()%%'' 메서드를 사용합니다.\\
====Example====
=====Example Explained=====
%%HTML%% 문서에는 두 개의 자식 노드 (두 개의 %%
%% 요소)를 가진 %%
This is a paragraph with #p1
This is another paragraph with #p2
\\
삭제하려는 요소를 찾습니다.\\
var elmnt = document.getElementById("p1");
\\
그 후, 해당 요소에 대한 remove() 메서드를 실행합니다.\\
elmnt.remove();
\\
''%%remove()%%'' 메서드는 이전 브라우저에서 작동하지 않습니다. 대신 ''%%removeChild()%%''를 사용하는 방법에 대한 아래 예제를 참조하십시오.\\
=====Removing a Child Node=====
''%%remove()%%'' 메서드를 지원하지 않는 브라우저의 경우, 요소를 제거하려면 부모 노드를 찾아야 합니다.\\
====Example====
This is a paragraph with #p1
This is another paragraph with #p2
=====Example Explained=====
다음의 %%HTML%% 문서에는 두 개의 자식 노드 (두 개의 ''%%%%'' 요소)를 가진 %%
This is a paragraph with #p1
This is another paragraph with #p2
\\
''%%id="div1"%%''을 가진 요소를 찾습니다.\\
var parent = document.getElementById("div1");
\\
''%%id="p1"%%''을 가진 ''%%%%'' 요소를 찾습니다.\\
This is a paragraph with #p1 This is another paragraph with #p2
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====
{{tag>오션, Javascript HTML DOM Elements (Nodes)}}