jQueryの挿入insertAfter()とinsertBefore()

内部挿入処理と同様に、同じ機能を実現するために、コンテンツターゲット

before() と .insertBefore() の場所が異なるため、jQuery には 2 つの新しいメソッド insertAfter と insertBefore が追加されました。主な違いは構文、つまり目標の内容と配置です。 before() の場合、選択式は関数の前にあり、コンテンツはパラメーターとして使用されます。一方、 .insertBefore() はその逆で、コンテンツはメソッドの前にあり、メソッドの前に配置されます。パラメーター内の要素の

after() と .insertAfter() は同じ関数を実装します。主な違いは構文、特に (挿入された) コンテンツとターゲットの配置です。 after() の場合、選択式は関数の前にあり、パラメーターは挿入されるコンテンツです。 .insertAfter() の場合、逆に、コンテンツがメソッドの前にある場合は、パラメーター

before、after、insertBefore の要素の後に配置されます。ターゲットと位置の違いに加え、insertAfter は複数パラメーターの処理をサポートしません。

insertAfter は、指定された要素の後ろに JQuery でカプセル化された要素を挿入します。後方に移動してから JQuery オブジェクトを挿入します。

insertBefore は、指定された要素の前に要素がある場合は、前の要素を前に移動してから挿入します。 JQuery オブジェクト

次にコードを書いてみましょう:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <button id="bt1">insertBefore添加元素</button>
    <button id="bt2">insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">php 中文网</p>
    </div>
    <div class="test2">php.cn</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })
    </script>
</body>

</html>

テストして違いを見てみましょう

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> </head> <body> <button id="bt1">insertBefore添加元素</button> <button id="bt2">insertAfter添加元素</button> <div class="aaron"> <p class="test1">php 中文网</p> </div> <div class="test2">php.cn</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在test1元素前后插入集合中每个匹配的元素 //不支持多参数 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1")) }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //在test2元素前后插入集合中每个匹配的元素 //不支持多参数 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2")) }) </script> </body> </html>

提出するリセットコード

自動運転