jquery append elements before, prepend, append, after usages and differences

The difference between after () and before () method

After ()-the method is to add the parameters inside the method to the back of the jquery object;

For example: A.after (b) means to put B behind A;

Before ()--the method is to add the parameters in the method to the front of the jquery object.

For example: A.before (b) means to put A in front of B;

Ii. differences between the methods of InsertAfter () and InsertBefore ()

In fact, the elements are reversed position;

Can be an existing element on the page, or it can be a dynamically added element.

such as: A.insertafter (b), the element A will be replaced by the B element;

If <span>CC</span><p>HELLO</p> uses $ ("span"). InsertAfter ($ ("P")), it becomes <p>hello</p ><span>CC</span>. Both positions are switched.

Iii. differences between append () and Appendto () methods

Append ()--the method is to add the parameters inside the method to the jquery object;

For example: A.append (b) means to place B in a, followed by the last position of the child element of A;

Appendto ()--the method is to add the jquery object to the appendto specified parameter.

For example: A.appendto (b) means to place a in B and append to the last position of the child element of B;

Iv. differences between the prepend () and the Prependto () methods

Append ()--the method is to add the parameters inside the method to the jquery object;

For example: A.append (b) means to place B in a and insert it into the first position of the child element of A;

Appendto ()--the method is to add the jquery object to the appendto specified parameter.

For example, the meaning of A.appendto (b) is to put A in B and insert it into the first position of the child element of B;

Example

1, insert Local method

/** * operates the DOM * @param {Object} parent element on the parent element, either as an element or as a Yquery object * @param {Strin G} Position Location: Beforebegin/afterbegin/beforeend/afterend * @param {*} any: String/text/object * @param {number} I Ndex serial number, if greater than 0 copy node * @return {Undefined} * @version 1.0 * December 2, 2013 17:08:26/function _insert (parent, position, an   Y, index) {if ($.isfunction (any)) {any = Any.call (parent);     }//String if ($.isstring (any)) {if (Regtag.test (No)) {parent.insertadjacenthtml (position, any);     else {Parent.insertadjacenttext (position, any);   }//Number else if ($.isnumber (any)) {Parent.insertadjacenttext (position, any); }//Element else if ($.iselement (any)) {parent.insertadjacentelement (position, index > 0? any.clonenode (!0): any   );     }//Yquery else if (_isyquery (any)) {Any.each (function () {_insert (parent, position, this);   }); } }

2, append, prepend, before, after

$.fn = {/** * Insert the element after inserting it into the current element (set) * @param {string/element/function} any * @return this * @version 1.0 * December 29, 2013 1:44:15 * * Append:function (any) {return This.each (function (index) {_insert (this, ' before     End ", any, index);   }); /** * Interpolation * Inserts the element forward into the current element (set) * @param {string/element/function} any * @return this * @version 1.0 * 2 013 Year December 29 1:44:15/prepend:function (any) {return This.each (function (index) {_insert (this, ' Afterbegin ')     , any, index);   }); /** * Before inserting elements before the current element (set) * @param {string/element/function} any * @return this * @version 1.0 * 2 013 Year December 29 1:44:15/before:function (any) {return This.each (function (index) {_insert (this, ' Beforebegin ')     , any, index);   }); /** * After inserting the element after the current element (set) * @param {string/element/function} any * @return this * @version 1.0 * 2 013 Year December 29 1:44:15/after:function (any) {return This.eaCH (function (index) {_insert (this, ' afterend ', any, index);   }); } };

3, Prependto, Prependto, InsertBefore, InsertAfter
The difference between these suffixes and the above is that the returned results are not the same. Such as:

$ (' #demo '). Append (' <a/> '); => returns $ (' #demo ') $ (' <a/> '). Appendto ($ (' #demo ')); The => returns $ (' a ');

So the relationship between the two is only the return of the result is different, the other is the same, you can solve:

_each ({   appendto: ' Append ',   prependto: ' prepend ',   insertbefore: ' Before ',   InsertAfter: ' After '}, Function (key, Val) {   $.fn[key] = function (selector) {     This.each (function () {       $ (selector) [Val] (this);     }); return this     ;   }; });

jquery method of appending elements (append prepend after before difference)

The Append () method inserts the content at the end of the selected element.

The Prepend () method inserts content at the beginning of the selected element.

The After () method inserts the content after the selected element.

The Before () method inserts content before the selected element.

<script type= "Text/javascript" src= "Http://common.jb51.net/jslib/jquery/jquery.min.js" ></script> < Div class= "Testdiv" >   <ul>     <li> first li label </li>   </ul> </div>  < Script>    //append   $ ('. Testdiv ul '). Append (' <li>append inserted li</li> ');   Prepend   $ ('. Testdiv ul '). Prepend (' <li>prepend inserted li</li> ');   After the   $ ('. Testdiv ul '). After (' <li>after inserted li</li> ');   Before   $ ('. Testdiv ul '). Before (' <li>before inserted li</li> ');  </script>

Effect chart

HTML structure diagram