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

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

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

1

="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() メソッドは子ノード リスト内の任意の位置にノードを挿入することがわかります。

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

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。