JavaScript HTML DOM 요소(노드)

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>

id="div1"인 요소 찾기:

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

id="p1"인

요소 찾기:

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

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

parent.removeChild(child);

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> //显示用户信息 function ShowData() { var userList = GetUserList(); var tabUser = document.getElementById("tabUser"); for (var i = 0; i < userList.length; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); td1.innerHTML = userList[i].UserId; td2.innerHTML = userList[i].UserName; tr.appendChild(td1); tr.appendChild(td2); tabUser.appendChild(tr); } } //清空用户信息 function RemoveData() { var tabUser = document.getElementById("tabUser"); for (var i = tabUser.childNodes.length - 1; i >= 0; i--) { tabUser.removeChild(tabUser.childNodes[i]); } } //获取用户列表 function GetUserList() { var userList = []; var user1 = { UserId: 1, UserName: "Kevin" }; var user2 = { UserId: 2, UserName: "Joins" }; userList.push(user1); userList.push(user2); return userList; } </script> </head> <body> <table id="tabUser" border="1"></table> <input type="button" id="btnShowData" onclick="ShowData()" value="显示数据" /> <input type="button" id="btnRemoveData" onclick="RemoveData()" value="清空数据" /> </body> </html>

제출하다 코드 재설정

자동운전