JavaScriptでinsertBeforeを使用する方法

Michael Jordan
リリース: 2023-11-24 11:56:59
オリジナル
1534 人が閲覧しました

JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

#次は、insertBefore() メソッドの基本的な使用例です。

#

// 获取要插入新节点的父节点  
var parentElement = document.getElementById('parent');  
  
// 创建新的元素节点  
var newElement = document.createElement('div');  
newElement.innerHTML = 'This is the new element';  
  
// 使用insertBefore方法插入新元素  
var referenceElement = parentElement.firstChild;  // 参考节点为父节点的第一个子节点  
parentElement.insertBefore(newElement, referenceElement);
ログイン後にコピー
# #In この例では、最初に親要素への参照を取得します (この例では ID は「parent」です)。次に、新しい div 要素を作成し、それにテキスト コンテンツを追加しました。最後に、insertBefore() メソッドを使用して、親要素の最初の子要素の前に新しい要素を挿入します。

insertBefore() メソッドは DOM ツリーの構造を変更することに注意してください。元の DOM 構造を変更したくない場合は、appendChild() メソッドまたは insertBefore() メソッドを使用して新しいノードを追加することを検討できます。

以上がJavaScriptでinsertBeforeを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!