Detailed explanation of jQuery.append() function

The append() function is used to append the specified content to the end position inside each matching element.

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

The opposite of this function is the prepend() function, which is used to append the specified content to the starting position inside each matching element.

This function belongs to the jQuery object (instance).

Syntax

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

Parameters

Parameter Description

content1 String Additional content specified by /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.

append() can append the content represented by multiple parameters to the end position inside 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. append() will traverse and execute the function based on all matching elements, and this in the function will point to the corresponding DOM element.

append() 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 appended to the element (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 append() function is of jQuery type, returning the current jQuery object itself (to facilitate chain-style programming).

Note: If the appended 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 append() function is used to append content to the end of each matching element:

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

Please note the append() function and appendTo() The difference between functions:

var $A = $("s1");
var $B = $("s2");
// 将$B追加到$A中
$A.append( $B ); // 返回$A
// 将$A追加到$B中
$A.appendTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部末尾追加的$A )

Take the following HTML code as an example:

<p id="n1">
    <span id="n2">CodePlayer</span>    
</p>
<p id="n3">
    <label class="move">Hello World</label>
</p>
<p id="n4">
    <i>测试内容</i>
</p>

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

var $n1 = $("#n1");
// 将一个strong标记追加到n1内部的末尾位置
$n1.append( &#39;<strong>追加内容</strong>&#39; );
// 将所有的label元素和i元素追加到n1内部的末尾位置
// 原来位置的label元素和i元素会消失(相当于是移动到n1内部的末尾位置)
$n1.append( document.getElementsByTagName("label"), $("i") );
// 为每个p元素内部的末尾位置追加一个span元素，html内容根据索引而有所不同
var $p = $("p");
$p.append( function(index, html){
    return &#39;<span>追加元素&#39; + (index + 1) + &#39;</span>&#39;;  
} );

append () will append the content to the end tag of the specified container 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">CodePlayer</span>    
<strong>追加内容</strong><label class="move">Hello World</label><i>测试内容</i><span>追加元素1</span></p>
<p id="n3">
    
<span>追加元素2</span></p>
<p id="n4">
    
<span>追加元素3</span></p>

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