JS, jquery operation of the node (add, delete)

JS-to-node operation method

I. Access

1. Getting the parent node

The ParentNode property value of a node is the parent node of the node. Example:

var parent = document.getElementById ("one"). parentnode;

2. Acquisition of sibling nodes

The Nextelementsibling and NextSibling properties work together.

The nextelementsibling attribute value of a node is the sibling node that is immediately behind the node, but this compatibility, in the IE9 version (including IE9) and other browsers, the result is that we want the younger brother node, the result of the IE9 below is the text node, does not meet our requirements. While the NextSibling property, in IE9 the following version of the result is we want the younger brother node, in the IE9 above version (including IE9) and other browser results are text nodes, and nextelementsibling just the opposite. These two properties can be used together to meet the requirements. Example:

var one = document.getElementById ("one");

var onenextnode = one.nextelementsibling | | one.nextsibling;

The adjacent sibling node corresponds to the adjacent sibling node, previouselementsibling and previoussibling are used together to obtain. Example:

var one = document.getElementById ("one");

var oneprenode = one.previouselementsibling | | one.previoussibling;

3. Acquisition of child nodes

The Children property value of a node is the child node of all elements of that element. Example:

var one = document.getElementById ("one");

var sons = One.children;

Two. How to add, delete, and clone nodes

1. Adding a child node

The idea of adding child nodes is to create a node first and then add it to the specified location.

The method of creating a node is fixed, and using the document.createelement (XXX) method, passing in the element name creates an element with the specified element name.

such as Var newdiv=document.createelement ("div");

There are two ways to insert a node into the parent node appendchild () and InsertBefore ().

The AppendChild () method is called by the parent node, which passes a child node to be inserted into the parent node, which inserts the child node into the last face of the parent node, which means that the child node is the last child node after the insert operation is complete. Example:

var one = document.getElementById ("one");

var newdiv = document.createelement ("div");

One.appendchild (NEWDIV);

The InsertBefore () method is also called by the parent node, which can insert a child node into the position we specify. The method has two parameters, the first parameter is the child node to be inserted, and the second parameter is the child node that we specify to insert the node before it. In particular, if the second argument is null, the effect is equivalent to appendchild (), and the new child node is inserted into the final one. Example:

var one = document.getElementById ("a");//Here is the parent node, and if not, it can be obtained by parentnode of the child node.

var newdiv = document.createelement ("div");

One.insertbefore (Newdiv, one.children[0]);

2. Deletion of child nodes

The corresponding method is RemoveChild (), called by the parent node, and the parameter is passed to the child node to be deleted. Example:

var = document.getElementById ("one");//Here is the parent node

One.removechild (One.children[0]);

3. Replication of nodes

The corresponding method is CloneNode (), called by the node to be copied, the method can pass a Boolean parameter, if True, indicates that not only the selected node will be copied, but also copy all child nodes of this node, if False or do not pass, it will only copy the node. Replication nodes are generally not used alone, will not be copied simply for replication, copied out to be placed in a location Ah, it is generally used in conjunction with the addition of nodes. Example:

var divs = document.getelementbytagname ("div");

var clonediv = Divs[0].clonenode ();

document.getElementById ("one"). Parentnode.appendchild (Clonediv);

How jquery operates on a node

1. Get parent node: Parent () method

2. Get all child nodes: children () method

1. Create a node, write the HTML content first, then wrap it directly with $ (), and notice that the double quotation marks in the HTML content are turned into single quotes. Example:

var $newDiv = $ ("<div id= ' n ' ></div>");

2. Copy node: Clone () method, called by the jquery object corresponding to the node to be copied, the parameter can be passed a Boolean value, true means that even with child nodes are copied together, false or not to replicate the child nodes. Example:

$ ("#two"). Clone ();

2. Add nodes to the last node inside a node so that the added node becomes the last child node of the original: the Append () method, called by the jquery object corresponding to the parent node, is the jquery object corresponding to the child node. Example:

$ ("#one"). Append ($newDiv);

The way to achieve the same goal is to appendto () and add a node to the last face inside a node. Compared to the Append () method, only the caller and the parameter are swapped. Example:

$newDiv. AppendTo ($ ("#one"));

3.prepend (), Prependto (), using the same as append (), AppendTo (), just turn the last face to the front.

4. After a node is added, the newly added node becomes the sibling node of the original node: After () method, called by the Brother node, the parameter is the sibling node. Example:

$ ("#bigBro"). After ($ ("#littleBro"));

The way to achieve the same goal is to InsertAfter () and add a node to the back of a node. Compared to the After () method, only the caller and the parameter are swapped. Example:

$ ("#littleBro"). InsertAfter ($ ("#bigBro"));

5.before (), InsertBefore (), using the same as after (), InsertBefore (), just turn the back to the front, the new node is the Brother node.

JS, jquery operation of the node (add, delete)