DOM operation records by jQuery

1. Insert a DOM element into the element

① Insert the original element into the element

Append (content) Return Value: jQuery parameter-content: Elements to be inserted: String, Element, jQuery

Add some elements to each matching element. The parameters can be strings or jQuery objects, as shown below:

$ ("#1"). append ("input type = 'button 'value =' OK '/>") Add a button after the internal element of 1

$ ("#1"). append ($ (". class") [0]) after the internal element of 1, add the css class as the first element in the element set of the class.

AppendTo (content) Return Value: jQuery parameter-content: inserted element StringElement, jQuery

Add all matching elements to the specified element. The parameter can be a string or jQuery object, as shown below:

$ ("#1"). appendTo ($ ("#2") Add 1 after the internal element of 2

② Insert the original element into the element

Prepend (content) Return Value: jQuery parameter-content: Elements to be inserted: String, Element, jQuery

PrependTo (content) Return Value: jQuery parameter-content: Elements to be inserted: String, Element, jQuery

They are used in the same way as append (content) and appendTo (content), but the difference is that they insert elements before the internal elements of the inserted elements.

All the above functions can only match elements of the div and other container properties, because these functions add elements to the matching element. If an error occurs when an element is added to the input, because the input cannot contain elements.

$ ("Input"). append ("ABC ");

 

2. Insert a DOM element outside the element

① After being inserted outside the element

After (content) Return Value: jQuery parameter-content: String, Element, jQuery Element to be inserted

Add some elements to the end of each matching element. parameters can be strings or jQuery objects.

InsertAfter (content) returned value: jQuery parameter-content: Elements to be inserted String, Element, jQuery

Add all matched elements to the end of the specified element.

$("#1 "). after ($ ("#2") add 2 to the end of 1 $("#1 "). insertAfter ($ ("#2") adds 1 to 2

② Insert it before the element is external

Before (content) Return Value: jQuery parameter-content: Elements to be inserted: String, Element, jQuery

InsertBefore (content) returned value: jQuery parameter-content: Elements to be inserted: String, Element, jQuery

They are used in the same way as after (content) and insertAfter (content), but the difference is that they insert elements before the element is inserted.

 

3. Wrap DOM elements

① Package external elements

Wrap (content) Return Value: jQuery parameter-content: Element, String, jQuery

Adds an element to each matching element.

$ (". 1 "). wrap ("#2") is a css class. Elements of the class are enclosed with 2 elements. $ (". 1 "). wrap ("<div class = '3'> </div>") package <div>

WrapAll (content) Return Value: jQuery parameter-content: Element, String, jQuery

Wrap only one element out of all matching elements

$ (". 1"). wrapAll ("<div class = '3'> </div>") for all css classes that are 1 elements, only one layer is included. <div>

② Internal elements of the package

WrapInner (content) returned value: jQuery parameter-content: Element, String, jQuery

Package an external layer element for all child elements in each matching element.

 

4. Replace the DOM Element

ReplaceAll (selector) Return Value: jQuery parameter-selector: replaced Element, jQuery

Replace all selector-matched elements with matched elements.

$ ("#1"). replaceAll (". class") use 1 to replace all css classes with class elements.

ReplaceWith (content) returned value: jQuery parameter-content: Used to replace elements String, Element, jQuery

Replaces all matched elements with specified HTML or DOM elements.

$ (". Class"). replaceWith ("#1") use 1 to replace all css classes with class elements.

$ (". Class"). replaceWith ("<div class = '3'> </div>") Use div to replace all css classes with class elements.

 

5. Delete DOM elements

Empty () Return Value: jQuery deletes the content of all matching elements, but the content is left on the shelf.

Remove (expr) Return Value: jQuery parameter-expr: filter element expression String delete all matching DOM elements

 

6. Clone DOM elements

Clone (true) Return Value: jQuery parameter-true: whether to clone all events of the cloned element to the new element.

$ ("#1"). clone (true). appendTo ("#2 ")

Clone the events bound to 1, and then add the cloned new elements to all the child elements in the 2 element.