JavaScript_javascript スキルでの appendChild、insertBefore、insertAfter の使用手順

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'); .Element.setAttribute('value ', 'Username:');
var usernameText = document.Document.getElementById('username');

insertBefore 定義
insertBefore() メソッドは、既存の子ノードの前に新しい子ノードを挿入します。ターゲットの子ノードとして、existingChild ノードの前に挿入されますexistingChild は、null の場合、その効果は appendChild


insertBefore example


コードをコピーします

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

var oTest = document.getElementById("test"); 🎜>var newNode = document.createElement("p"); newNode.innerHTML = "これはテストです" 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); 🎜>} }

使用法と例の後で挿入





コードをコピー


コードは次のとおりです:

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

txtName ノードの後に​​ htmlSpan を兄弟ノードとして挿入します 概要: 1. appendChild と insertBefore はノードをペアリングするためのメソッドとして使用されますが、insertAfter は単なるカスタム関数 2. appendChild と比較して、insertBefore はより柔軟で、ターゲット ノードの任意のノード配列に新しいノードを挿入できます。 3. appendChild と insertBefore を使用して新しいノードを挿入します。前提条件として、その兄弟ノードには共通の親ノードが必要です。