HTML 요소 생성
var newEle =document.createElement(p);
생성된 요소는 다른 요소에 추가됩니다.
A.appendChild(B): B가 새 요소인 경우 A 요소 뒤에 B는 요소의 모든 하위 요소 끝에 추가됩니다.
페이지 B에 요소가 이미 있는 경우 이 문의 효과는 B 요소를 A의 하위 요소로 이동하는 것입니다.
appendChild() 이 함수는 innerHTML 속성과 비슷한 효과를 가집니다. 차이점은 다음과 같습니다.
1 innerHTML은appendChild보다 느리게 실행됩니다(아마도 구문 분석이 필요하기 때문일 수 있습니다).
2 innerHTML은 문자열 작성과 같이appendChild보다 더 편리합니다. 유사
<!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>예제 분석:
이 코드는 새로운
요소를 생성합니다:
var para=document.createElement("p");
요소에 텍스트를 추가하려면 먼저 텍스트를 생성해야 합니다. 노드. 이 코드는 텍스트 노드를 생성합니다:
var node=document.createTextNode("This is a new Parallel.");
그런 다음 이 텍스트 노드를
요소에 추가해야 합니다:
para.appendChild (node);
마지막으로 기존 요소에 새 요소를 추가해야 합니다.
이 코드는 기존 요소를 찾습니다.
var element=document.getElementById("div1");
다음 코드는 기존 요소 뒤에 새 요소를 추가합니다.
element.appendChild(para );
Remove HTML elements
removechild 함수는 상위 요소의 지정된 하위 요소를 삭제할 수 있습니다.
이 함수가 하위 노드를 성공적으로 삭제하면 삭제된 노드를 반환하고, 그렇지 않으면 null을 반환합니다.
구문 구조:
fatherObj.removeChild(childrenObj)
매개변수 설명:
1.fatherObj: 삭제할 하위 요소의 요소 개체입니다.
2.childrenObj: 삭제할 하위 요소 개체입니다.
<!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>
var parent=document.getElementById("div1");id="p1"인
요소 찾기:
var child=document.getElementById("p1");상위 요소에서 하위 요소 제거:
parent.removeChild(child);
다음 섹션