1. Home
  2. 자바 스크립트의 HTML DOM 요소

최고의 자바 스크립트의 HTML DOM 요소 튜토리얼 2024년, 이 튜토리얼에서는 새로운 HTML 요소 만들기,예,분석의 예 :,기존의 HTML 요소를 제거,예,분석의 예,HTML DOM 튜토리얼,를 배울 수 있습니다.

자바 스크립트의 HTML DOM 요소

새로운 HTML 요소 만들기

새로운 HTML 요소 만들기

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

예

<사업부 아이디 = "div1">
<P ID = "P1은">이 단락이다. </ P>
<P ID = "P2는"> 이것은 또 다른 문단이다. </ P>
</ DIV>

<스크립트>
var에 파라 = document.createElement ( "P");
VAR 노드 = document.createTextNode ( "이것은 새 단락입니다.");
para.appendChild (노드);

VAR 요소 = document.getElementById를 ( "div1");
element.appendChild (파라);
</ 스크립트>

»시도

분석의 예 :

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

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

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

VAR 노드 = document.createTextNode ( "이것은 새 단락입니다.");

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

para.appendChild (노드);

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

코드는 기존의 요소를 찾을 수 있습니다 :

VAR 요소 = document.getElementById를 ( "div1");

기존의 요소 후 다음 코드는 새로운 요소를 추가 :

element.appendChild (파라);

기존의 HTML 요소를 제거

다음 코드는 요소를 삭제하는 방법을 보여줍니다

예

<사업부 아이디 = "div1">
<P ID = "P1은">이 단락이다. </ P>
<P ID = "P2는"> 이것은 또 다른 문단이다. </ P>
</ DIV>

<스크립트>
var에 부모 = document.getElementById를 ( "div1");
var에 아이 = document.getElementById를 ( "P1");
parent.removeChild (아이);
</ 스크립트>


»시도

분석의 예

<div> 요소의 자식 노드가 둘 (두 개의 <P> 요소)가 포함 된 HTML 문서 :

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

ID = "div1"요소를 찾기 :

var에 부모 = document.getElementById를 ( "div1");

ID = "P1"의 <p> 요소를 찾기 :

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

부모 요소의 하위 요소에서 제거 :

parent.removeChild(child);

램프 상위 요소에 대한 참조없이 요소를 제거 할 수 있으면 좋은 것이다.
그러나 불행하게도. 만약 삭제 될 알아야 DOM 요소뿐만 아니라, 그 부모 요소.

당신이 인 parentNode 부모 요소를 찾아 삭제 한 다음 속성을 사용할 자식 요소를 찾을 :이 일반적인 솔루션입니다 :

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

HTML DOM 튜토리얼

우리의 자바 스크립트 튜토리얼의 HTML DOM 부분에서는 배웠습니다 :

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

당신이 HTML DOM 지식에 액세스하기 위해 자바 스크립트를 사용하는 방법에 대한 자세한 내용을 원한다면, 우리의 완전한 참조하시기 바랍니다 HTML DOM 튜토리얼 .

핫 튜토리얼

Contact US

자바 스크립트의 HTML DOM 요소
10/30