JavaScript HTML DOM 요소

새 HTML 요소 만들기

HTML DOM에 새 요소를 추가하려면 먼저 요소(요소 노드)를 만든 다음 기존 요소에 추가해야 합니다. 이 요소.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8">
<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"); 
element.appendChild(para); 
</script> 
</body>
 </html>

예제 분석:

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

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

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

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

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

para.appendChild (node);

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

이 코드는 기존 요소를 찾습니다.

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

다음 코드는 기존 요소 뒤에 새 요소를 추가합니다.

element.appendChild(para); 기존 HTML 요소 삭제

이 코드는 기존 요소에 새 요소를 추가합니다.

<!DOCTYPE html>
 <html>
 <meta charset="utf-8">
 <body>
  <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>
 </body> 
</html>

이 HTML 문서에는 두 개의 하위 노드(두 개의 <p> 요소)가 있는 <div> 요소가 포함되어 있습니다. ：

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

요소 찾기 with id="div1":

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

id="p1"인 <p> 요소 찾기:

var child=document. );

상위 요소에서 하위 요소 제거:

parent.removeChild(child);

상위 요소를 참조하지 않고 요소를 삭제할 수 있다면 매우 좋습니다.

그런데 아쉽네요. DOM은 삭제해야 하는 요소와 해당 상위 요소를 알아야 합니다.

다음은 일반적인 해결 방법입니다. 제거하려는 하위 요소를 찾은 다음 해당 parentNode 속성을 사용하여 상위 요소를 찾습니다.

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

child.parentNode.removeChild ( child);

HTML DOM 튜토리얼

JavaScript 튜토리얼의 HTML DOM 섹션에서 다음을 배웠습니다.

HTML 요소의 내용을 변경하는 방법(innerHTML) HTML 요소의 스타일을 변경하는 방법(CSS) ) HTML DOM 이벤트에 응답하는 방법 React HTML 요소를 추가하거나 제거하는 방법

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <meta charset="utf-8"> <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"); element.appendChild(para); </script> </body> </html>

제출하다 코드 재설정

자동운전