初心者向けjs挿入ノードappendChild insertBefore使い方メソッド

初心者向けjs挿入ノードappendChild insertBefore使い方メソッド_javascriptスキル

WBOY

リリース： 2016-05-16 18:05:08

オリジナル

1350 人が閲覧しました

まず、定義からこれら 2 つのメソッドを理解します。
appendChild() メソッド: ノードの子ノードリストの末尾に新しい子ノードを追加できます。構文: appendChild(newchild)
insertBefore() メソッド: 新しい子ノードを既存の子ノードの前に挿入できます。構文: insertBefore(newchild,refchild)
同一性: 子ノードの挿入
相違点: 実装原則とメソッドが異なります。
appendChild メソッドは、親ノード内の子ノードの末尾に (親ノードを基準にして) 新しいノードを追加します。
insertBeforeメソッドは、既存のノードの前に（子ノードを基準にして）新しいノードを追加します。
この簡単な例を見てみましょう: box-con の ID を持つ子ノード div を最後に追加します

コードをコピーコードは次のとおりです。

="con2" > 2

🎜>

コードをコピーしますコードは次のとおりです: window.onload = function () {

var btn = document. getElementById("creatbtn");

btn.onclick = function() { 
insertEle(); 
} 
} 
function insertEle() { 
var oTest = document.getElementById ("box-one"); 
var newNode = document.createElement("div"); 
newNode.innerHTML = " これは newcon "; 🎜>oTeset.insertBefore(newNode,null ); // 両方のメソッドを実装できます 
} 

 
insertBefore の最初のパラメータは、新しいノード変数である appendChild と同じです。 insert の 2 番目のパラメータは null だけでなくても構いません。次のように書くこともできます

コードをコピー

コードは次のとおりです。 function insertEle () { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div");

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

newNode. innerHTML = " これは newcon "; 
oTest.insertBefore(newNode,reforeNode) // 新しい要素ノードが p1 の要素の前に挿入されます 
} 

 
 または 

コードをコピー

コードは次のとおりです。 function insertEle( ) { var oTest = document.getElementById("box-one"); var newNode = document.getElementById("p1"); 🎜>newNode.innerHTML = " これは newcon ";

oTest.insertBefore(newNode,foreNode.nextSibling);// 新しく作成された要素ノードは、p1 の ID を持つノード要素の前に挿入されます、

 つまり、IDがP1のノードの要素の後ろに挿入されます。 
} 

ここで言いたいのは、nextSibling: (同じツリー レベル内の) 要素の直後の要素です。 

reforeNode.nextSibling: beforeNode オブジェクトの直後のノードを取得します。 

previousSibling - ノードの前の兄弟ノードを取得します。

insertBefore() メソッドの特徴は、既存の子ノードの前に新しいノードを挿入することであることがわかりますが、 2 つの状況を組み合わせると、insertBefore() メソッドは子ノードリスト内の任意の位置にノードを挿入することがわかります。

ふふふ。。。一部のメソッドは、定義された特性に作用するだけでなく、文法に準拠している限り、いくつかの属性を組み合わせると常に予期せぬ利点が得られます。

初心者なので、私の理解はまだ浅く、誤解されているかもしれません。これ以上のアドバイスは求めません。ここにすべてを記録し、みんなの提案を吸収して、私の成長を促進できればと思っています。。。