JavaScript_javascript スキルでの appendChild、insertBefore、insertAfter の使用手順-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:12:59

オリジナル

1299 人が閲覧しました

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 を使用して新しいノードを挿入します。前提条件として、その兄弟ノードには共通の親ノードが必要です。