Detailed explanation of prepend() method in jQuery

Detailed explanation of prepend() method in jQuery_jquery

WBOY

Release： 2016-05-16 15:45:52

Original

1699 people have browsed it

The prepend() method inserts the specified element into the beginning of the matching element. Its function is basically the same as the prependTo() method. The only difference is in syntax, although the syntax form is basically the same.

The following is an introduction to the grammatical structure:

Copy code The code is as follows:

$(selector).prepend(content)

Parameter list:

demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
 height:200px;
 width:200px;
 border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("div").prepend("被加添的内容");
 })
})
</script>
</head>
<body>
<div>前面要添加内容:</div>
<button>点击查看效果</button>
</body>
</html>

Copy after login

Detailed explanation of prepend() 2:

prepend() function is used to append specified content to the starting 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 append() function, which is used to append the specified content to the end position inside each matching element.

This function belongs to the jQuery object (instance).

Grammar

Copy code The code is as follows:

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

Parameters

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

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

NoteNote: If the appended content is some elements in the current page, then these elements will disappear from their original positions. In short, this is a move operation, not a copy operation.

Examples & Instructions

The

prepend() function is used to append content to the starting position inside each matching element:

<p><!--插入到p元素内部的起始位置-->段落文本1<span></span></p>
<p><!--插入到p元素内部的起始位置-->段落文本2<span></span></p>

<script type="text/javascript">
$("p").prepend( '<!--插入到p元素内部的起始位置-->' ); 
</script>

Copy after login

Please note the difference between prepend() function and prependTo() function:

var $A = $("s1");
var $B = $("s2");

// 将$B追加到$A中
$A.prepend( $B ); // 返回$A
// 将$A追加到$B中
$A.prependTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部开头追加的$A元素 )

Copy after login

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>

Copy after login

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

var $n1 = $("#n1");
//将一个strong标记追加到n1内部的起始位置
$n1.prepend( '<strong>追加内容</strong>' );


//将所有的label元素和i元素追加到n1内部的起始位置
//原来位置的label元素和i元素会消失(相当于是移动到n1内部的起始位置)
$n1.prepend( document.getElementsByTagName("label"), $("i") );

//为每个p元素内部的起始位置追加一个span元素，html内容根据索引而有所不同
var $p = $("p");
$p.prepend( function(index, html){
 return '<span>追加元素' + (index + 1) + '</span>'; 
} );

Copy after login

Run the code

prepend() will append the content to the start 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 (no adjustment to the format):

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>测试内容</i><strong>追加内容</strong>
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3"><span>追加元素2</span>
 
</p>
<p id="n4"><span>追加元素3</span>
 
</p>

Copy after login