jquery-related methods for manipulating DOM nodes

1. Inserting a new node within a specified node

The following content is used to add new content within the specified node

1) Append (content): The contents are inserted at the end of all DOM nodes contained within the jquery object.

2) Append (function (index,html)): Use function (index,html) to iterate through each node contained in jquery, inserting function (index,html) at the end of each node. The return value of the function.

3) AppendTo (selector): Adds the DOM element that the current jquery object contains to the inside end of all the DOM that selecctor matches.

4) prepend (content): Inserts content on top of all the DOM nodes contained in the JQuery object, where the contents can be either an HTML string, a DOM element, or a jquery object.

5) prepend (function (index,html)): Use function (index,html) to iterate through each node contained in jquery, inserting function (index,html) at the top of each node The return value of the function.

6) Prependto (selector): Adds the current jquery object containing DOM elements to the selector matching DOM has the top of the interior.

Here's how the program demonstrates the functionality of these methods.

<! DOCTYPE Html>

Results:

If you use Append (function (index,html)), prepend (function (index,html)), you can add different content to different elements. As follows:
<! DOCTYPE Html>
2. Add an outer node
The following method is used to add a new node before the target node
1) after (content): adds content corresponding to all DOM nodes that the jquery object contains.
2) after (function): Use the function (index) functions to iterate through each node contained in jquery, adding the return value of the function (index) functions, followed by each node.
3) Before: adds content corresponding to all DOM nodes that the node jquery object contains.
4) before (function index): Use function (index) to iterate over each node contained in jquery, adding the return value of the function (index) functions in front of each node.
5) InsertAfter (selector): Inserts all the DOM nodes that the current jquery object contains before all the nodes that match selector.
The following procedures demonstrate the above several insertion methods.
<! DOCTYPE Html>
Results:
3. Replace
Here is the method used to replace the node DOM node
1) replacewith (newcontent): Replaces all DOM objects contained in the current jquery object with Newcontent.
2) replacewith (function Index): Use function (index) to iterate through each node contained in jquery, using function (index) The return value of the function replaces each node contained in the JQuery object.
3) ReplaceAll (selector): Replaces all DOM objects contained in the current jquery object with selectot matching elements.
4. Delete
The following method is used to delete the specified DOM node
1) Empty (): Deletes all DOM nodes contained in the current jquery object.
2) Remove ([selector]): Deletes all DOM nodes contained in the current jquery object.
3) Detach (selector): The function of this method is similar to the Remove ([selector]) method except that the detach () method retains the associated jquery data on the deleted element, and when it is necessary to reinsert the deleted element at a later point, This method is useful.
5. Copying
Clone ([withdataandevents]): Copies all DOM elements contained in the current jquery object and selects the copied copies. This function is useful when you need to add a copy of an element in a DOM document to another location.
<! DOCTYPE Html>




 JQuery operations DOM node related methods