Home >Web Front-end >JS Tutorial >Records about jquery and DOM node operation methods and attributes_jquery

Records about jquery and DOM node operation methods and attributes_jquery

WBOY
WBOYOriginal
2016-05-16 15:05:201261browse

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

方法

源包装集/字串

目标包装集体

特性描述

A.append(B)

 

 

 

B

 

 

 

A

若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置;若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置。

由此,若目标只匹配一个元素时,使用前述方法后源将被删除。

B.appendTo(A)

A.prepend(B)

B.prependTo(A)

A.before(B)

B.insertBefore(A)

A.after(B)

B.insertAfter(A)

Method

Source wrapper set/string

Target Packaging Collective

Feature Description

A.append(B)

B

A

If the target packaging set only matches one element, the source (including all elements matched by the same-origin packaging set) will be moved to the target location; if the target packaging set contains multiple elements, the source will remain at the original location. , but also make an identical copy to the target location.

Thus, if the target only matches one element, the source will be deleted after using the above method.

B.appendTo(A)

A.prepend(B)

B.prependTo(A)

A.before(B)

B.insertBefore(A)

A.after(B)

B.insertAfter(A)

Example: In the above table, A.append(B) means to add B to the existing content of all elements matching A, so B is the source and A is the target packaging set.

The summary is: after using the above method, the two nodes become sibling nodes of the same level

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

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

//Add newNode to the end of someNode’s childNodes list 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 place the node at a specific position in the childNodes list //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) The replaceChild method is used to replace child nodes and 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); To sum up, 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 article about jquery and DOM node operation methods and attribute records is all the content shared by the editor with you. I hope it can give you a reference, and I hope you will support Script Home.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn