jquery inside the DOM operation (find, create, add, delete node)

One: Create element node (add)
Create an element node and add nodes as child nodes of the element to the DOM tree

1.append (): Adding elements under an element
Usage: $ ("id"). Append ("defined node"); For example: var li1 = $ ("<li> Orange </li>");
Add attribute node: $ ("<li class= ' Test ' > Strawberry </li>")

2.appendTo (): Add elements to an element
Usage: $ (LI3). AppendTo ("#box1");

3.prepend (): Add a node to the top of the element

4.prependTo (): Adds a node to the top of the specified element
Usage: $ (LI3). Prependto ("#box1");

5.before (): Adds a node to the front (outer) of the specified element
Usage: $ ("#div1"). before (DIV1);

6.insertBefore (): Adds a new element to the sibling element of the target element before the target node

7.after (): Adds a node to the back of the specified element (outer layer)
Usage: $ ("#div1"). After (DIV1);

8.insertAfer (): Adds the newly created element to the target node behind as a sibling element
Usage: $ (Element). InsertAfter ("Target Node")

Two: Delete node

Remove (): Removes all occurrences of the element, this method can delete all child nodes of the element
Usage: $ (Element). Remove ();

Empty (): empty in principle, it is not a delete element, it just empties the node, it can empty all the child nodes of the specified element
Usage: $ (Element). empty ();

Three: Modify node (replace node, parcel node, copy node)

Wrap node: Wrap () Warpall ()
Usage: $ (Element). Wrap ("HTML")
Note: The Wrap () method is a separate package for all elements, while Warpall () wraps all the matching elements with an element

Copy node: Clone (true) copies an element completely: true copies the element while copying its behavior, without adding parameters if the copy behavior is not required
Usage: $ (Element). Clone (True);

Four: Property operations (Get Properties, set properties, delete attributes)

Get Properties: 1.var $para =$ ("P");//Get <p> node
2.varp_txt= $para. attr ("title");//Get <p> element node properties

Set properties: 1.$ ("P"). attr ("title", "title");//Set individual property values
2.$ ("P"). attr ({"title": "Title", "Class": "Highlignt"});//Set multiple properties at once for the same element

Delete attribute: Removeattr ()
Usage: $ ("P"). Removeattr ("title");//delete <p> element's attribute ' title '

V: Style action (get style, set style, append style, remove style, toggle style, determine whether there is a style)

Get style and set style: attr ()
Usage: 1.var p_class=$ ("P"). attr ("class");//Get <p> element's class
2.$ ("P"). attr ("Class", "high");//Set <p> element's class is "high"

Append style: AddClass ()
Usage: $ ("P"). addclass ("Anthor");//Append to <p> element "Anthor" class

Removal style: Removeclass ()
Usage: $ ("P"). Removeclass ("Anthor");//Remove the class with the value "Anthor" in the <p> element

Remove style: Toggleclass () (toggle, add and delete)
Usage: $ ("P"). Toggleclass ("High");//Repeat Switch <p> the class named "High" in the element

Determine if there is a style: Hasclass ()
Usage: $ ("P"). Hasclass ("High");//Determines whether a class with a value of "Anthor" exists in the <p> element
$ ("P"). Hasclass ("high") = = = = $ ("P"). Is (". High"); Is ("." +class)

jquery inside the DOM operation (find, create, add, delete node)