Operations on DOM by js and jquery

1. Create an element node
The traditional javascript method creates element nodes.
Var a = document. createElement ("p ");
The method for creating a node in jQuery is:
$ ('<P> </p> ');
Like createElement (), the newly created element node is not automatically added to the document.
If you want to add it to the document, you can use methods such as append (), insertAfter (), and before () in jQuery.
For example:
Var a = $ ('<p> </p> ');
$ ('Body'). append (a); // Add it to the end of the body element.

2. Create a text node:
The traditional javascript method creates text nodes
Var B = document. createTextNode ("my demo ");
It is usually used together to create a text node and an element node.
For example:
Var mes = document. createTextNode ("hello world ");
Var container = document. createElement ("p ");
Container. appendChild (mes );
Document. body. appendChild (container );

Creating a node in jQuery does not have to be so troublesome:
$ ('<P> hello world </p> ');
Like createElement (), the newly created element node is not automatically added to the document.
If you want to add it to the document, you can use methods such as append (), insertAfter (), and before () in jQuery.
For example:
Var a = $ ('<p> hello world </p> ');
$ ('Body'). append (a); // Add it to the end of the body element.

3. Copy a node
The traditional javascript method copies nodes:
For example:
Var mes = document. createTextNode ("hello world ");
Var container = document. createElement ("p ");
Container. appendChild (mes );
Document. body. appendChild (container );
Var newpara = container. cloneNode (true); // difference between true and false
Document. body. appendChild (newpara );
Note:
True: <p> aaaa </p> clone.
False: Only <p> </p> is cloned, and the text in it is not cloned.
You can use firebug.

Copy nodes in jQuery:
Var a = $ ('<p> hello world </p> ');
$ ('Body'). append ();
Var clone_a = a. clone ();
$ ('Body'). append (clone_a );

Like createElement (), the copied new element node is not automatically added to the document.
If you want to add it to the document, you can use methods such as append (), insertAfter (), and before () in jQuery.
Note: If the id is the same after cloning, do not forget to use. attr ("id", "new_id") to change the ID of the new node.

4. Insert nodes
Insert nodes in the traditional javascript method:
For example:
AppendChild ():
Append a subnode to the element, and insert the new node to the end.
Var container = document. createElement ("p ");
Document. body. appendChild (container );

InsertBefore ():
As the name implies, a new node is inserted before the target node.
Element. insertBefore (newNode, targerNode );

Insert nodes in jQuery is much more than that in javascript,
For example:
. Append ()
. AppendTo ()
. Prepend ()
. PrependTo ()
. After ()
. InsertAfter ()
. Before ()
. InsertBefore ()
Therefore, simplifying dom operations is also one of jquery's highlights.

5. delete a node
Delete a node using the traditional javascript method:
For example:
Var B = document. getElementById ("B ");
Var c = B. parentNode;
C. removeChild (B );

Delete a node in jQuery:
For example:
$ ('# Test2'). remove ();

6. Replace nodes
The traditional javascript method replaces nodes:
For example:
Element. repalceChild (newNode, oldNode );
The oldNode must be a subnode of the Element.

Replace nodes in jQuery:
For example:
$ ("<P> replace test1! </P> "). replaceAll (" # test1 ");

7. Set Properties to get Properties
In the traditional javascript method, set attributes and obtain attributes:
For example:
SetAttribute (); // set
Var a = document. createElement ("p ");
A. setAttribute ("title", "my demo ");
Whether the title attribute exists or not, the subsequent value is my demo.

GetAttribute (); // get
Var a = document. getElementById ("cssrain ");
Var B = a. getAttribute ("title ");
If the property does not exist, null is returned,

In jQuery, set attributes to get attributes:
For example:
$ ("# Test1"). attr ({"class": "test", "title": "TestDemo! "});
$ ("# Test1"). attr ("class ");

8. Search for nodes
Finding nodes is a piece of cake for jQuery.
JQuery is most concerned with finding nodes, that is, the selector.
For example:
$ ('# Id ')
$ ('. Class ')
$ ('Tag ')
$ ('Tag. class ')
$ ('# Id tag ')
$ ('Tag # id ')
$ ('# Id: visible ')
$ ('# Id. class ')
$ ('. Class. class ')
....