About jquery and DOM node operation methods and attribute records

The following is an article about jquery and DOM node operation methods and attribute records. The editor thinks it's pretty good, so I'd like to share it with you now and give it as a reference

I found a list of jquery's operation node methods online. As follows:

##A.append(B)If the target packaging set matches only one element, the source (including all elements matched by the same-origin packaging set) will be moved to the target position; if the target packaging set matches If the set contains multiple elements, the source will remain in its original location, but an identical copy will be copied to the destination. B.appendTo(A)##A.prepend(B)B.prependTo(A)##A.before(B)B.insertBefore(A)The summary is: after using the above method, the two nodes become sibling nodes of the same level

##Method	Source package set/string	Target packaging collective	Characteristic description
	B	A	Thus, if the target only matches one element, the source will be deleted after using the aforementioned method.
##A.after(B)
B.insertAfter(A)
Example: In the above table, A.append(B) Indicates that B is appended to the existing content of all elements that match A, so B is the source and A is the target wrapper set.

The following is a summary of methods for operating nodes in DOM:

(1)appendChild Method, used to add a node to the end of the childNodes list

//Add newNode to the end of the childNodes list of someNode

var returnedNode = someNode.appendChild(newNode);

//Change the first child node of someNode to the last child node

var returnedNode = someNode.appendChild(someNode.firstChild);

(2)insertBefore method, you can The node is placed at a specific position in the childNodes list

//It becomes the last child node after insertion

returnedNode = someNode.insertBefore(newNode, null);//The same effect as appendChild

//Becomes the first child node after insertion

returnedNode = someNode.insertBefor(newNode, someNode.firstChild);

(3)replaceChild method is used to replace the child Node, accepts two parameters: the child node to be inserted and the child node to be replaced. The child node to be replaced will be removed from the document tree, and its position will be occupied by the child node to be inserted

//Replace the first child node

returnedNode = someNode.replaceChild( newNode, someNode.firstChild);

(4)removeChild method is used to remove child nodes

//Remove the first child node

var formerFirstChild = someNode. removeChild(someNode.firstChild);

The summary is: the above methods are all used by parent nodes to operate child nodes

The following figure shows the search relationship between father, son and sibling nodes

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use jQuery to implement @ ID floating display in WordPress

Ajax bootstrap beautifies the web page and Code to implement page loading, deletion and viewing details

The above is the detailed content of About jquery and DOM node operation methods and attribute records. For more information, please follow other related articles on the PHP Chinese website!