Detailed explanation of jQuery.after() function

The after() function is used to insert specified content after each matching element.

The specified content can be: htmlString, DOM element (or array), jQuery object, function (return value).

The opposite of this function is the before() function, which is used to insert specified content before each matching element.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.after( content1 [, content2 [, contentN ]] )

Parameters

Parameter Description

content1 The additional content specified by the String/Element/jQuery/Function type.

content2 Optional/String/Element/jQuery type specified additional content.

contentN Optional/String/Element/jQuery type specified additional content, there can be any number.

after() can insert all the content represented by multiple parameters into the position immediately after each matching element. If the parameter is of type string, it is treated as an html string.

jQuery 1.4 New support: parameter content1 can be a function. after() will traverse and execute the function based on all matching elements, and this in the function will point to the corresponding DOM element.

after() will also pass in two parameters to the function: the first parameter is the index of the current element in the matching element, and the second parameter is the current internal html content (innerHTML) of the element. The return value of the function is the content that needs to be inserted (can be an html string, DOM element, or jQuery object).

Note: Only the first parameter can be a custom function, used for traversal execution. If the subsequent parameter is also a function, its toString() method is called, converted into a string, and treated as html content.

Return value

The return value of the after() function is of jQuery type, returning the current jQuery object itself (to facilitate chain-style programming).

Note: If the inserted content is some elements in the current page, these elements will disappear from their original positions. In short, this amounts to a move operation, not a copy operation.

Example & Description

The after() function is used to insert content after each matching element:

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->
<script type="text/javascript">
$("p").after( &#39;<!--插入到p元素之后的位置-->&#39; ); 
</script>

Please note the after() function and insertAfter() function The difference:

var $A = $("s1");
var $B = $("s2");
// 将$B插入到$A之后
$A.after( $B ); // 返回$A
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

Take the following HTML code as an example:

<p id="n1">
    <span id="n2">span#n2</span>    
</p>
<p id="n3">
    <label id="n4">label#n4</label>
    <i id="n5">i#n5</i>
</p>

The following jQuery sample code is used to demonstrate the specific usage of the after() function:

// 在n4之后插入一个自定义的span元素
$("#n4").after(&#39;<span id="n6">span#n6(new)</span>&#39;);
// 在n2之后插入n5
// n5将从原位置上消失
$("#n2").after( document.getElementById("n5") );
// 在每个span元素之后插入自定义的strong元素
$("span").after( function(index, innerHTML){
    return &#39;<strong>strong元素&#39; + (index + 1) + &#39;</strong>&#39;;
} );

after( ) will insert the content after the closing tag of the specified element without adding any additional whitespace characters. The complete html code after the above code is executed is as follows (the format has not been adjusted):

<p id="n1">
    <span id="n2">span#n2</span><strong>strong元素1</strong><i id="n5">i#n5</i>    
</p>
<p id="n3">
    <label id="n4">label#n4</label><span id="n6">span#n6(new)</span><strong>strong元素2</strong>
    
</p>

The above is the detailed content of Detailed explanation of jQuery.after() function. For more information, please follow other related articles on the PHP Chinese website!