jquery prepend () method using the detailed _jquery

The Prepend () method inserts the specified element into the matching element at the beginning of the internal, and the function is essentially the same as the Prependto () method, which differs only in grammatical terms, although it is essentially the same in terms of grammatical form.

The following syntax structure is described below:

Copy Code code as follows:

$ (selector). prepend (content)

Parameter list:

Demo

<! DOCTYPE html>
 
 

Prepend () detailed two:

The prepend () function appends the specified content to the starting position within each matching element.

The specified content can be an HTML string, a DOM element (or array), a jquery object, a function (the return value).

Relative to the function is the append () function, which appends the specified content to the end position within each matching element.

This function belongs to the jquery object (instance).

Grammar

Copy Code code as follows:

Jqueryobject.prepend (Content1 [, Content2 [, CONTENTN]])

Parameters

jQuery 1.4 New support : Parameter content1 can be a function. Prepend () executes the function by traversing all the elements that match, and this in the function points to the corresponding DOM element.

prepend () also passes two arguments to the function : The first argument 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 a function is the content that needs to be appended to the element (which can be an HTML string, Dom element, jquery object).

Note: Only the first parameter can be a custom function for traversing execution. If the subsequent parameter is also a function, its ToString () method is called, converted to a string, and treated as HTML content.
return value

The return value of the prepend () function is the jquery type, returning the current jquery object itself (to facilitate chained-style programming).

Note meaning: If the appended content is some element in the current page, the elements will disappear from the original position. In short, this is a move operation, not a copy operation.

Example & Description

The prepend () function appends the starting position within each matching element:

<p><!--The start position inserted inside the P element--> paragraph text 1<span></span></p>
<p><!-- Inserts the start position inside the P element--> paragraph text 2<span></span></p>

<script type= "Text/javascript" >
$ ("p" ). Prepend (' <!--INSERT into p elements inside the starting position--> '); 
</script>

Notice the difference between the prepend () function and the Prependto () function:

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

Append $b to $a
$A. prepend ($B);//return $a
//append $a to $b
$A. Prependto ($B);//Return the JQuery object that represents the append (matches all $b internal opening append The $a element)

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> Test Content < /i>
</p>

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

var $n 1 = $ ("#n1");
Appends a strong tag to the starting position within the N1
$n 1.prepend (' <strong> append </strong> ');


Append all the label elements and I elements to the start position
//original position in the N1 and the label element and I element will disappear (equivalent to moving to the starting position within N1)
$n 1.prepend ( document.getElementsByTagName ("label"), $ ("I"));

Appends a span element to the starting position within each P element, and the HTML content varies by index
var $p = $ ("P");
$p. prepend (function (index, HTML) {return
 ' <span> append element ' + (index + 1) + ' </span> '; 
});

Run code

Prepend () appends the content to the start tag of the specified container element and does not add any extra whitespace characters, the complete HTML code after the execution of the code is as follows (formatting not adjusted):

<p id= "N1" ><span> append elements 1</span><label class= "move" >hello world</label><i> test content </i><strong> Additions </strong>
 <span id= "n2" >CodePlayer</span> 
</p>
<p id= "n3" ><span> append element 2</span>
 
</p>
<p id= "N4" ><span> append element 3 </span>
 
</p>