Jquery-some common methods (2) DOM operations "InsertBefore (), InsertAfter (), AppendTo (), Prependto (), before (), after (), append (), prepend (), Remove (), on (), Off (), scrolltop () "

First, InsertBefore ()

The following code: Find the span label and cut the span tag to the front of the Div

<! DOCTYPE html>"en">"UTF-8"> <title></title> <script src=".. /.. /jq-practice/jq/jquery-2.2.1.min.js"></script> <script>$ (function () {$ ('span'). InsertBefore ($ ('Div'));    }); </script>
Second, InsertAfter ()
Just the opposite of InsertBefore.
<! DOCTYPE html>"en">"UTF-8"> <title></title> <script src=".. /.. /jq-practice/jq/jquery-2.2.1.min.js"></script> <script>$ (function () {//$ ('span'). InsertBefore ($ ('Div')); $('Div'). InsertAfter ($ ('span'));//just the opposite of InsertBefore .        }); </script>
Third, AppendTo ()
AppendTo (), like the native AppendChild (), turns a node into a child node of another node and puts it at the end !
<! DOCTYPE html>"en">"UTF-8"> <title></title> <script src=".. /.. /jq-practice/jq/jquery-2.2.1.min.js"></script> <script>$ (function () {//$ (' span '). InsertBefore ($ (' div '));//$ (' div '). InsertAfter ($ (' span ')); //just the opposite of InsertBefore.

$('Div'). AppendTo ($ ('span'));//turn the div into a sub-node of span and put it in the last        }); </script>
Iv. Prependto ()
In contrast to Appendto (), the difference is that a node becomes a child of another node and is placed at the front !
<! DOCTYPE html>"en">"UTF-8"> <title></title> <script src=".. /.. /jq-practice/jq/jquery-2.2.1.min.js"></script> <script>$ (function () {//$ (' span '). InsertBefore ($ (' div '));//$ (' div '). InsertAfter ($ (' span ')); //just the opposite of InsertBefore .//$ (' div '). AppendTo ($ (' span ')); //turn the div into a sub-node of span and put it in the last$('Div'). Prependto ($ ('span'));//turn the div into a sub-node of span, placed in the top        }); </script>
Wu, before ()
The Before () method has the same effect as the InsertBefore () method, except that the following actions will be different! 
InsertBefore () can be used as a verb, before () as a noun!
Similar: After () corresponds to InsertAfter (), append () corresponds to Appendto (), prepend () corresponds to Prependto ()!
<! DOCTYPE html>"en">"UTF-8"> <title></title> <script src=".. /.. /jq-practice/jq/jquery-2.2.1.min.js"></script> <script>$ (function () {//$ (' span '). InsertBefore ($ (' div ')); //find span and insert span in front of DIV, verb properties//$ (' div '). InsertAfter ($ (' span ')); //just the opposite of InsertBefore .//$ (' div '). AppendTo ($ (' span ')); //turn the div into a sub-node of span and put it in the last//$ (' div '). Prependto ($ (' span ')); //turn the div into a sub-node of span, placed in the top//$ (' div '). Before ($ (' span ')); //the div must be preceded by a span, a noun attribute$('Div'). Before ($ ('span'). CSS ('background','Red');//This method is for Div, so the next operation is Div, that is, the div background becomes red $('span'). InsertBefore ($ ('Div'). CSS ('background','Blue');//This method is for span, so the subsequent action is span, that is, the background of span becomes blue         }); </script>
Vi. Remove ()
The Remove () method is to delete the node!
Seven, on () and Off () methods
The On () method and the off () method are a pair of opposite methods, Object.on (' click ', function () {...}) is equivalent to Object.click (function () {...}), the On () method is more powerful, not only for click, but also for other methods that you define yourself, similar to show, and so on, the arguments after on () can be multiple at the same time, object. (' Click MouseOver ', function () {...}), mouse-over-click to perform actions, or separate operation in JSON format, similar to the example, on () is equivalent to ON, off () is equivalent to closing.
<! DOCTYPE html>"en">"UTF-8"> <title></title> <script src=".. /.. /jq-practice/jq/jquery-2.2.1.min.js"></script> <script>$ (function () {//$ (' span '). InsertBefore ($ (' div ')); //find span and insert span in front of Div//$ (' div '). InsertAfter ($ (' span ')); //just the opposite of InsertBefore .//$ (' div '). AppendTo ($ (' span ')); //turn the div into a sub-node of span and put it in the last//$ (' div '). Prependto ($ (' span ')); //turn the div into a sub-node of span, placed in the top//$ (' div '). Before ($ (' span ')); //the front of the div must be span//$ (' div '). Before ($ (' span ')). CSS (' background ', ' red '); //This method is for Div, so the next operation is Div, that is, the div background becomes red//$ (' span '). InsertBefore ($ (' div ')). CSS (' background ', ' blue ');//This method is for span, so the subsequent action is span, that is, the background of span becomes blue//$ (' div '). Remove (); //Find Div and delete this node//$ (' div '). On (' Click MouseOver ', function () {//alert (123);//            })            <!--JSON format, mouse over popup 456, mouse click to eject 123--> $ (' div '). On ({' Click ': function () {                alert (123);                    }, ' MouseOver ': function () {alert (456); $ (' div '). Off (' mouseover ');//After execution once (Close}})//$ (' div '). On (' Click MouseOver ', Function ()        {//alert (123);//$ (' div '). Off ();/})    }); </script>
Viii. scrolltop ()
Gets the scrolling distance of the page!
Jquery-some common methods (2) DOM operations "InsertBefore (), InsertAfter (), AppendTo (), Prependto (), before (), after (), append (), prepend (), Remove (), on (), Off (), scrolltop () "