자바 스크립트의 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 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>
<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>
<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);
child.parentNode.removeChild(child);
HTML DOM 튜토리얼
우리의 자바 스크립트 튜토리얼의 HTML DOM 부분에서는 배웠습니다 :
- (innerHTML을)를 HTML 요소의 내용을 변경하는 방법
- HTML 요소의 스타일 (CSS)을 변경하는 방법
- 는 HTML DOM의 이벤트에 반응하는 방법
- 나는 추가하거나 HTML 요소를 제거하는 방법
당신이 HTML DOM 지식에 액세스하기 위해 자바 스크립트를 사용하는 방법에 대한 자세한 내용을 원한다면, 우리의 완전한 참조하시기 바랍니다 HTML DOM 튜토리얼 .