简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ> ウェブフロントエンド> フロントエンドQ&A> 本文

jqueryで兄弟ノードを追加する方法

青灯夜游
リリース： 2022-04-27 17:59:34
オリジナル
4633 人が閲覧しました

jquery で兄弟ノードを追加する方法: 1. before()、構文 "$(指定された要素).before(兄弟ノード)" を使用すると、指定された要素の前に兄弟ノードを挿入できます。 after() の構文 "$(指定された要素).after(兄弟ノード)" を使用すると、指定された要素の後に兄弟ノードを挿入できます。

jqueryで兄弟ノードを追加する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery では、次の 2 つのメソッドを使用して兄弟ノードを追加できます。

  • before() メソッド: 選択した要素の前に指定したコンテンツを挿入します。

  • after() メソッド: 選択した要素の後に指定したコンテンツを挿入します。

#1. before() を使用して兄弟ノードを前方に追加します

before() は指定された要素の前に兄弟ノードを挿入できます

構文: 

$(A).before(B)
ログイン後にコピー

  • は、B 兄弟ノードを A ノードの前に挿入することを意味します。

例: 

      

  
一个大标题
 
一个p段落
 
一个div元素
 
一个p段落
ログイン後にコピー

jqueryで兄弟ノードを追加する方法

2. after() を使用して兄弟ノードを後方に追加します

after() は、指定された要素の後に兄弟ノードを挿入できます。

構文: 

$(A).after(B)
ログイン後にコピー

  • は、A ノードの外側の後に B 兄弟ノードを挿入することを意味します。

例: 

      

  
一个大标题
 
一个p段落
 
一个div元素
 
一个p段落
ログイン後にコピー

jqueryで兄弟ノードを追加する方法

[推奨学習:

jQuery ビデオ チュートリアル、Web フロント-ビデオ終了]

以上がjqueryで兄弟ノードを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery
ソース：php.cn
前の記事：CSS スタイルの近接原則とは何ですか? 次の記事：CSS の vw との互換性の問題はありますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Nuxt.js に jQuery をインストールする手順 プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
jQueryがデータ属性を取得するときに間違った値を取得する データ属性
を持つ div があります。 $('button').click(...
から 2023-11-01 23:01:19
0
1
209
jQuery の Transfer-Encoding:chunked をサポート 私はウェブ開発者です。私のスクリプトでは、header() を使用して「Transfer-Encoding:chunked」を設定しています。そしてWebページにflush()を実...
から 2023-10-25 23:44:37
0
1
230
JavaScript または jQuery を使用して画像の自然な寸法を取得するにはどうすればよいですか? これまでのところ、私はこのコードを持っています: varimg=document.getElementById('draggable'); varwidth=img.clientW...
から 2023-10-21 13:53:08
0
2
275
テキストエリアを自動的に拡張する シンプルな自動拡張テキストエリアを作成しようとしています。これは私のコードです: textarea.onkeyup=function(){textarea.style.height...
から 2023-10-21 08:49:23
0
2
225
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！