jquery for DOM Operation Record

1. Inserting a DOM element inside an element

① inserted after the original element inside the element

Append (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

To add elements to each matching element, the parameter can be either a string or a jquery object, as follows:

$ ("#1"). Append ("Input type= ' button ' value= ' OK '/>") adds a button after the inner element of 1

$ ("#1"). Append ($ (". Class") [0]) adds the first element in the element set of the CSS class to class after the inner element of 1

AppendTo (content) return value: JQuery parameter-content: The element being inserted stringelement,jquery

Adds all matching elements to the specified element, which can be either a string or a jquery object, as follows:

$ ("#1"). AppendTo ($ ("#2")) add 1 after the inner element of 2

② before the original element inside the element

Prepend (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

Prependto (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

They are consistent with the use of append (content) and appendto (content), but the difference is that they are inserted into the element before the inner element of the inserted element

The above functions can only match elements of container properties such as Div, because these functions add elements to the inside of a matching element, such as adding an element to input will be an error, because input cannot contain elements

$ ("input"). Append ("ABC");

2. Inserting a DOM element outside an element

① after inserting outside the element

After (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

Add some elements after each matched element, which can be either a string or a jquery object

InsertAfter (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

Adds all matching elements to the specified element

$ ("#1"). After ($ ("#2")) add 2 to 1 after $ ("#1"). InsertAfter ($ ("#2")) Add 1 to 2

② before inserting outside the element

Before (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

InsertBefore (content) return value: JQuery parameter-content: The element to be inserted string,element,jquery

They are consistent with the use of after (content) and InsertAfter (content), but the difference is that they insert elements before they are inserted outside the element

3. Wrapping DOM Elements

① Wrapping External elements

Wrap (content) return value: JQuery parameter-content: element of the package element element,string,jquery

A layer of elements on the outer bread for each matching element

$ (". 1"). Wrap ("#2") for the CSS class is 1 of the elements of the outer bread on 2 elements $ (". 1"). Wrap ("<div class= ' 3 ' ></div>") on the package <div>

Wrapall (content) return value: JQuery parameter-content: The element that wraps the element element,string,jquery

Wrap an element only outside of them for all matching elements

$ (". 1"). Wrapall ("<div class= ' 3 ' ></div>") for all CSS classes that are 1 elements outside of the package only one layer <div>

② Package Interior elements

Wrapinner (content) return value: JQuery parameter-content: The element that wraps the element element,string,jquery

Package a layer element for all child elements within each matching element

4. Replacing DOM elements

ReplaceAll (selector) return value: JQuery parameter-selector: replaced element element,jquery

Replace all selector matching elements with matching elements

$ ("#1"). ReplaceAll (". Class") Replace all CSS classes with 1 elements of class

ReplaceWith (content) return value: JQuery parameter-content: The element to replace String,element,jquery

Replaces all matching elements with the specified HTML or DOM element

$ (". Class"). ReplaceWith ("#1") Replace all CSS classes with 1 elements of class

$ (". Class"). ReplaceWith ("<div class= ' 3 ' ></div>") Replace all CSS classes with a div as a class element

5. Delete DOM elements

Empty () return value: JQuery Deletes the contents of all matching elements, only the content, and the shelves left.

Remove (expr) return value: JQuery parameter-expr: An expression that filters elements string deletes all matching DOM elements

6. Cloning DOM elements

Clone (True) return value: JQuery parameter-true: Whether all events of the cloned element are also cloned to the new element

$ ("#1"). Clone (True). AppendTo ("#2")

Clones 1 with its bound events, and then adds the cloned new element to all the inner child elements of the 2 element