14.文書管理(14.5-8)
10827 ワード
14.5ノードの作成/挿入/削除👊
14.5.1ノードの作成
新しい要素ノードオブジェクトの作成
var element = document.createElement(요소의 이름);var headline = document.createElement("h1");
// 위 코드의 headline에 설정된 프로퍼티 값은 다음과 같다.
console.log(headline.nodeName); // "H1"
console.log(headline.nodeType); // "1"14.5.2ノードの挿入
上記のノードオブジェクトが作成されている以上、DOMツリーに挿入しましょう.appendChildメソッドとinsertBeforeメソッドを使用します.
エレメントの最後に挿入:appendChild
要素ノード.appendChild(挿入するノード)
appendChildメソッドを使用してノードオブジェクトを挿入すると、そのオブジェクトはDOMツリーに追加され、各ノードの階層を定義するプログラムに変更されます.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="doglist">
<li>포메라니안</li>
<li>달마시안</li>
</ul>
</body>
</html><li>불독</li>を挿入するには、次のコードを記述します.let doglist = document.getElementById("doglist");
let element = document.createElement("li");
let text = document.createTextNode("불독");
doglist.appendChild(element);
element.appendChild(text);要素ノード.InsertBefore(挿入するノード、サブノード)
前の例のHTMLドキュメントの2番目のサブエレメントの前に
<li>불독</li>を挿入するには、次のコードを記述します.let doglist = document.getElementById("doglist");
let element = document.createElement("li");
let text = document.createTextNode("불독");
// 자식 노드 바로 앞에(before) 삽입
doglist.insertBefore(element, doglist.children[1]);
element.appendChild(text);14.5.3ノードの削除
ノード.removeChild(サブノード)
削除できるノードは、そのノードのサブノードです.すなわち,削除するノードの親ノードオブジェクトからremoveChildメソッドを呼び出す.
node.parantNode.removeChild(node);14.5.4ノードの交換
ノード.Childの置き換え(新しいノード、サブノード)
置換するノードの親ノードからreplaceChildメソッドを呼び出します.
node.parantNode.replaceChild(newnode, node);Reference
この問題について(14.文書管理(14.5-8)), 我々は、より多くの情報をここで見つけました https://velog.io/@veloger_97/14.-문서-제어-14.58テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol