JavaScript HTML DOM要素(ノード)が追加され、編集、操作例の分析を削除します。


本明細書の例は、JavaScript HTML DOM要素(ノード)の新規作成、編集、削除操作を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
createElement、createText Node、apendChild、insertBefore、removeChild、replace Child
createElement
以下のコードは

要素を作成するためのものです。


var para = document.createElement("p");
createText Node
テキストノードを

要素に追加します。


var node = document.createTextNode("        。");
appendChild(新しい元素をテールに追加するために使う)
テキストノードを

要素に追加します。


para.appendChild(node);
以上の3つの結合事例: 

<div id="div1">
<p id="p1">      。</p>
<p id="p2">        。</p>
</div>
<script>
var para = document.createElement("p"); //  p  
var node = document.createTextNode("        。"); //      
para.appendChild(node); // p        (  )
var element = document.getElementById("div1");
element.appendChild(para); //          
</script>
実行結果: 
 
insertBefore(新元素を開始位置に追加)

<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");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
実行結果: 
 
レモveChild
要素を削除するには、親要素を知る必要があります。

<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>
実行結果:
 
replacceChild
HTML DOM中の要素をreplacceChild()法を用いて置換した。

<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 parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
実行結果:

関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
さらに、JavaScriptに関する内容については、当駅のテーマを見ることができます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、および「JavaScriptはアルゴリズムと技術の総括を遍歴します。
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。