Node insertion--contrast jquery and JavaScript methods (i)

Second, insert the element:

<div>2     <p> Facing the Sea, spring </P></div> 

(i) , JQuery Method

1. Insert inside the node:

Method	Description
Append ()	Append content to each matching element
AppendTo ()	Appending all the elements to another specified set of elements actually reverses the use of the Append (). such as $ (a). Append (b) and $ (b). Appendto (a) is equivalent
Prepend ()	Internal front content to each matched element
Prependto ()	Puts all matching elements in front of another specified set of elements. Actually reversed the use of Preprend (). such as $ (A). Prepend (b) and $ (b). Prenpendto (b) equivalent

The specific implementation is as follows:

1 $ ("div"). Append ("<p> This is what the append () method adds </p>");  Insert paragraph 3 $ ("div") in the first sub-node position under the DIV element . prepend ("<p> This is what the prepend () method adds </p>");  inserts a paragraph at the last child node position under a DIV element    

The following two methods are more consistent with people's general thinking, but the effect is the same

1 $ ("<p> This is the content added by the AppendTo method </p>"). AppendTo ("div"); // insert paragraph into the DIV element's first child node position 3 $ ("<p> This is the content added by the Prependto method </p>"). Prependto ("div");  inserts a paragraph into the last child node position of a DIV element    

2. Insert outside the node:

Method	Description
After ()	Insert content after each matching element
Before ()	Insert content before each matching element
InsertAfter ()	Inserts all matching elements behind another specified set of elements
InsertBefore ()	Inserts all matching elements in front of another specified set of elements

The specific implementation is as follows:

1 $ ("div"). After ("<p> This is what the after () method adds </p>"); // Insert paragraph 3 $ ("div") after the DIV element. Before ("<p> This is what the before () method adds </p>");  insert a paragraph before a DIV element    

1 $ ("<p> This is the content added by the InsertAfter method </p>"). InsertAfter ("div"); // Insert the paragraph behind the DIV element 3 $ ("<p> This is the InsertBefore method added within </p>"). InsertBefore ("div");  insert a paragraph in front of a DIV element    

3, AppendTo (), Prependto (), InsertBefore (), InsertAfter () methods have destructive operational characteristics, that is, if you select already existing content and insert them into the specified object, the contents of the original location will be deleted. The following example selects and moves the paragraph text contained in the original DIV element behind the div element. The demo is as follows:

1 $ ("P"). InsertAfter ("div");

(ii) , JavaScript Method

1. Insert inside the node: appendchild () —--corresponds to jquery's append (), insertbefore ()---corresponds to prepend () in jquery

See the jquery method above for specific effects ...

2. Custom JavaScript extension DOM function ================ to----to be continued

Node insertion--contrast jquery and JavaScript methods (i)