ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryで指定された要素の後にコンテンツを追加する方法

jqueryで指定された要素の後にコンテンツを追加する方法

青灯夜游
リリース: 2022-06-07 17:35:16
オリジナル
8603 人が閲覧しました

2 つの方法: 1. after() 構文 "$(指定された要素).after("新しいコンテンツ") を使用して、指定された要素の後に指定されたコンテンツを追加します。 2. insertAfter()、構文「$("コンテンツ値").insertAfter(指定された要素)」を使用して、指定された要素の後にコンテンツを挿入します。

jqueryで指定された要素の後にコンテンツを追加する方法

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

jquery で指定した要素の後にコンテンツを追加する方法

指定した要素の後にコンテンツを追加するには、指定した要素の後に兄弟要素を挿入します。 。 jquery は 2 つのメソッドを提供します:

  • after()

  • insertAfter()

after Both ( ) と insertAfter() は、選択された要素の後に指定されたコンテンツを挿入できますが、それらの操作オブジェクトは逆になります。以下で詳しく紹介していきましょう。

1. after() を使用します

$(A).after(B) は、A の外側の後に B を挿入することを意味します。

例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script src="js/jquery-3.2.1.min.js"></script>

        <script>

            $(document).ready(function() {

                $("button").click(function() {

                    $("div").after("这是往div后面增加的新文本内容");

                });

            });

        </script>

    </head>

    <body>

 

        <div style="height:100px;background-color:yellow">

            这是一些文本。

            <p>这是div块中的一个p段落。</p>

        </div><br>

        <button>往div后面增加内容</button>

 

    </body>

</html>

ログイン後にコピー

jqueryで指定された要素の後にコンテンツを追加する方法

2. insertAfter()

$( を使用します。 A).insertAfter(B) は、B の外側の後に A を挿入することを意味します。

例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <script src="js/jquery-1.10.2.min.js"></script>

        <script>

            $(document).ready(function() {

                $("button").click(function() {

                    $("<span style=&#39;color:pink;&#39;>这是一个新增的span元素</span>").insertAfter("div");

                });

            });

        </script>

    </head>

    <body>

 

        <div style="height:100px;background-color:yellow">

            这是一些文本。

            <p>这是div块中的一个p段落。</p>

        </div><br>

        <button>往div后面增加内容</button>

 

    </body>

</html>

ログイン後にコピー

jqueryで指定された要素の後にコンテンツを追加する方法

[推奨学習: jQuery ビデオ チュートリアルWeb フロントエンド ビデオ]

以上がjqueryで指定された要素の後にコンテンツを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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