DOM 요소
새 HTML 요소 생성
새 HTML 요소 생성
HTML DOM에 새 요소를 추가하려면 먼저 요소(요소 노드)를 생성해야 합니다. ) 를 선택한 다음 해당 요소를 기존 요소에 추가합니다.인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
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文.");
그런 다음 < ; 요소는 다음 텍스트 노드를 추가합니다:
para.appendChild(node);
마지막으로 기존 요소에 새 요소를 추가해야 합니다.
이 코드는 기존 요소를 찾습니다.
var
element=document.getElementById("div1");
다음 코드는 기존 요소 뒤에 새 요소를 추가합니다.
element.appendChild(para);
기존 HTML 요소 삭제
다음 코드는 요소를 삭제하는 방법을 보여줍니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</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">문단입니다. </p>
<p id="p2">이것은 또 다른 문단입니다. </p>
</div>
<p id="p1">문단입니다. </p>
<p id="p2">이것은 또 다른 문단입니다. </p>
</div>
id="div1"인 요소 찾기:
var parent=document.getElementById("div1 " );
id="p1"인 <p> 요소 찾기:
var child=document.getElementById("p1");
상위 요소에서 하위 요소 제거:
parent.removeChild(child);
 | 상위 요소를 참조하지 않고 요소를 삭제할 수 있으면 좋을 것 같습니다. 괜찮은.
|
|---|
일반적인 해결 방법은 다음과 같습니다. 제거하려는 하위 요소를 찾은 다음 해당 parentNode 속성을 사용하여 상위 요소를 찾습니다.
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
child.parentNode.removeChild(child);
HTML DOM 튜토리얼
JavaScript 튜토리얼의 HTML DOM 부분에서 다음을 배웠습니다:
HTML 요소의 내용을 변경하는 방법(innerHTML)
방법 HTML 요소 스타일 변경(CSS)
HTML DOM 이벤트에 반응하는 방법
HTML 요소를 추가하거나 제거하는 방법
JavaScript를 사용하여 HTML DOM에 액세스하는 방법에 대해 자세히 알아보려면 전체 HTML DOM 튜토리얼을 방문하세요.
