DOM operations in JavaScript and jQuery

JavaScript and jQuery DOM operations 001, creating element nodes

002 traditional javascript method to create element nodes

003 var a = document. createElement ("p ");

004 how to create a node in jQuery is:

005 $ ('<p> </p> ');

006, like createElement (), the newly created element node is not automatically added to the document.

007 if you want to add it to the document, you can use methods such as append (), insertAfter (), and before () in jQuery.

008 for example:

009 var a =$ ('<p> </p> ');

010 $ ('body'). append (a); // Add it to the end of the body element.

011

012

013 2. Create a text node:

014 create text nodes using traditional javascript methods

015 var B = document. createTextNode ("my demo ");

016 is usually used together to create text nodes and element nodes.

017 for example:

018 var mes = document. createTextNode ("hello world ");

019 var container = document. createElement ("p ");

020 container. appendChild (mes );

021 document. body. appendChild (container );

022

023 and creating a node in jQuery does not have to be so troublesome:

024 $ ('<p> hello world </p> ');

Like createElement (), the newly created element node is not automatically added to the document.

026 if you want to add it to the document, you can use methods such as append (), insertAfter (), and before () in jQuery.

027 for example:

028 var a =$ ('<p> hello world </p> ');

029 $ ('body'). append (a); // Add it to the end of the body element.

030

031 3. Copy a node

032 traditional javascript method, copying nodes:

033 for example:

034 var mes = document. createTextNode ("hello world ");

035 var container = document. createElement ("p ");

036 container. appendChild (mes );

037 document. body. appendChild (container );

038 var newpara = container. cloneNode (true); // difference between true and false

039 document. body. appendChild (newpara );

040 note:

041 true: <p> aaaa </p> clone.

042 false: Only <p> </p> is cloned, and the text in it is not cloned.

You can use firebug.

044

045 copy nodes in jQuery:

046 var a =$ ('<p> hello world </p> ');

047 $ ('body'). append ();

048 var clone_a = a. clone ();

049 $ ('body'). append (clone_a );

050

Like createElement (), the copied new element node is not automatically added to the document.

052 if you want to add it to the document, you can use methods such as append (), insertAfter (), and before () in jQuery.

053 another 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.

054

055 4, insert Node

056 traditional javascript method, insert node:

057 for example:

058 appendChild ():

059 append a subnode to the element and insert the new node to the end.

060 var container = document. createElement ("p ");

061 document. body. appendChild (container );

062

063 insertBefore ():

064, as its name implies, is to insert a new node to the front of the target node.

065 Element. insertBefore (newNode, targerNode );

066

067 adding nodes in jQuery is much more than that in javascript,

068 for example:

069. append ()

070. appendTo ()

071. prepend ()

072. prependTo ()

073. after ()

074. insertAfter ()

075. before ()

076. insertBefore ()

077, simplifying dom operations is also one of jquery's highlights.

078

079

080 5, delete a node

081 delete a node using the traditional javascript method:

082 for example:

083 var B = document. getElementById ("B ");

084 var c = B. parentNode;

085 c. removeChild (B );

086

087 delete a node in jQuery:

088 for example:

089 $ ('# test2'). remove ();

090

091 6, replacing nodes

092 traditional javascript method, replacing nodes:

093 for example:

094 Element. repalceChild (newNode, oldNode );

095 oldNode must be a subnode of Element.

096

097 replace nodes in jQuery:

098 for example:

099 $ ("<p> replace test1! </P> "). replaceAll (" # test1 ");

100

101 7. Set Properties to get Properties

102 set attributes and obtain attributes in the traditional javascript method:

103 for example:

104 setAttribute (); // set

105 var a = document. createElement ("p ");

106 a. setAttribute ("title", "my demo ");

107 whether the title attribute exists or not, the subsequent value is my demo.

108

109 getAttribute (); // get

110 var a = document. getElementById ("cssrain ");

111 var B = a. getAttribute ("title ");

112 if the property does not exist, null is returned,

113

114 set attributes in jQuery to get attributes:

115 for example:

116 $ ("# test1"). attr ({"class": "test", "title": "TestDemo! "});

117 $ ("# test1"). attr ("class ");

118

119 8. Search for nodes

120 finding nodes is a piece of cake for jQuery.

121 jQuery is most concerned with finding nodes, that is, the selector.

122 For example:

123 $ ('# id ')

124 $ ('. class ')

125 $ ('tag ')

126 $ ('tag. class ')

127 $ ('# id tag ')

128 $ ('tag # id ')

129 $ ('# id: visible ')

130 $ ('# id. class ')

131 $ ('. class. class ')

132 ....

The above is the content of DOM operations in JavaScript and jQuery. For more information, see PHP Chinese website (www.php1.cn )!