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 paragraph.");

次に、このテキストノードを

要素に追加する必要があります:

para.appendChild (node);

最後に、新しい要素を既存の要素に追加する必要があります。

このコードは既存の要素を検索します:

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

次のコードは既存の要素の後に新しい要素を追加します:

element.appendChild(para );

HTML要素の削除

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 ドキュメントには 2 つの子ノード (2 つの <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>

提出するリセットコード

自動運転