js_javascript スキルにおける AppendChild と insertBefore の使用法の詳細な分析

appendChild 定義
appendChild(newChild: Node): Node
ノードをそのノードの childNodes 配列に追加します。
サポート: IE 5.0、Mozilla 1.0、Netscape 6.0、 Safari 1.0、Opera 7.0
指定したノードの子ノード配列にノードを追加する 簡単に言うと、指定したノードに要素を追加するということです。 🎜>appendChild の使用法

target.appendChild(newChild)
newChild はターゲットの子ノードとして最後の子ノードの後に​​挿入されます

appendChild の例

var newElement = document.Document.createElement('label'); newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);

insertBefore 定義

既存の子ノードの前に新しい子ノードを追加します。
insertBefore() メソッドの機能は次のとおりです: 既存の子ノードの前に新しい子ノードを挿入します

insertBefore 使用法

target.insertBefore(newChild,existingChild)
newChild はターゲットの子ノードとして、existingChild ノードの前に挿入されます

と同じです。

insertBefore example

var oTest = document.getElementById("test");var newNode = document.createElement("p");
newNode.innerHTML = "Thisテストです";
oTest.insertBefore(newNode,oTest.childNodes[0]);

そうですね、insertBefore がある場合は、insertAfter もあるはずですよね。
それでは、Aptana を使用して例を書いてみましょう。しかし、Aptana のスマート プロンプトでは、insertAfter メソッドがないことがわかりました。
次に、自分で定義してください:)


insertAfter 定義

function insertAfter(newEl, targetEl){
varparentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl)
{
parentEl.appendChild (newEl);
}else
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
} >insertAfter の使用法は Example と同じです

var txtName = document.getElementById("txtName ");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "これはテストです";
insertAfter(htmlSpan,txtName);

txtName ノードの後に​​ txtName の兄弟ノードとして htmlSpan を挿入します。

概要:

2. appendChild と比較して、insertBefore はより柔軟で、ターゲット ノードの子ノード配列内の任意の位置に新しいノードを挿入できます。
3. appendChild と insertBefore を使用して新しいノードを挿入します。前提条件として、その兄弟ノードには共通の親ノードが必要です。