appendChild 定義
appendChild(newChild: 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('値', 'ユーザー名:');
var usernameText = document.Document.getElementById('username');
ユーザー名Text.appendChild(newElement);
定義の前に挿入
insertBefore() メソッドは、既存の子ノードの前に新しい子ノードを挿入します。
insertBefore() メソッドの機能は、既存の子ノードの前に新しい子ノードを挿入することです。
使用前に挿入
target.insertBefore(newChild,existingChild)
newChild は、ターゲットの子ノードとして、existingChild ノードの前に挿入されます。
existingChild はオプションのパラメータです。null の場合、その効果は appendChild と同じです。
例の前に挿入
var oTest = document.getElementById("テスト");
var newNode = document.createElement("p");
newNode.innerHTML = "これはテストです";
oTest.insertBefore(newNode,oTest.childNodes[0]);
それでは、insertBefore がある場合は、insertAfter もあるはずですよね?
さて、Aptana を使用して例を書いてみましょう。しかし、Aptana のスマート プロンプトでは、insertAfter メソッドが存在しないことがわかります。
次に、Luo を自分で定義します:)
定義後に挿入
関数 insertAfter(newEl, targetEl)
{
varparentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl)
{
親El.appendChild(newEl);
}それ以外
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
insertAfterの使用法と例
var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("スパン");
htmlSpan.innerHTML = "これはテストです";
insertAfter(htmlSpan,txtName);
txtName ノードの後に txtName の兄弟ノードとして htmlSpan を挿入します。
要約:
1. appendChild と insertBefore はノードのメソッドとして使用されますが、insertAfter は単なるカスタム関数です。
2. appendChild と比較して、insertBefore はより柔軟であり、ターゲット ノードの子ノード配列内の任意の位置に新しいノードを挿入できます。
3. appendChild と insertBefore を使用して新しいノードを挿入します。その前提として、その兄弟ノードには共通の親ノードが必要です。