jquery and JavaScript nodes insert elements in a way that compares _javascript techniques

Second, insert element:

<div>
<p> Facing the sea, spring flowers </p>
</div>

(i), jquery method

1. Insert inside the node:

method	description
Append ()
appendto ()
prepend ()

Specifically implemented as follows:

 $ ("div"). Append ("<p> This is the content </p>" added by the Append ());//Insert paragraph $ ("Div") at the first child node position under the DIV element
 . prepend ("<p> This is the content added by the prepend () method </p>);//insert paragraph at the last child node position under the DIV element

The following two methods are more in line with the general thinking of people, but the effect is the same

 $ ("<p> This is the content added by the Appendto method </p>"). Appendto ("div");//insert paragraph to the first child node position of the DIV element
 $ ("<p> This is the content added by the Prependto method </p> "). Prependto (" div ");//insert paragraph to the last child node of the 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 into the back of another specified set of elements
InsertBefore ()	Inserts all matching elements in front of another specified set of elements

Specifically implemented as follows:

$ ("div"). After ("<p> This is the after () method added content </p>")//Insert paragraph
$ ("div") after the DIV element. Before ("<p> this is before () Method added </p> ");//insert paragraph before DIV element

$ ("div"). After ("<p> This is the after () method added content </p>")//Insert paragraph
$ ("div") after the DIV element. Before ("<p> this is before () Method added </p> ");//insert paragraph before DIV element

3, Appendto (), Prependto (), InsertBefore (), InsertAfter () method has destructive operational characteristics, that is, if the selection already exists and inserts them into the specified object, the contents of the original position will be deleted. The following example selects and moves the paragraph text contained in the original DIV element to the back of the DIV element. The demo is as follows:
 $("p").insertAfter("div");

(ii), JavaScript method

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

See the jquery method above for specific effects ...

2, custom JavaScript extended DOM function ================ to be continued ~

The above is the content of this article, I hope to help you, thank you for the support of cloud habitat community!