DOM manipulation with JavaScript and jQuery

001 1, create element node

002 Traditional javascript method, create element node

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

004 The method of creating node in jQuery is:

00 5 $(' < p>< /p>');

006 Like createElement(), the new element node created will not be automatically added to the document.

007 If you want to add it to the document, you can use the append() or insertAfter() method or before () method in jQuery.

008 For example:

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

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

011

012

013 2. Create text node:

014 Traditional javascript method to create text node

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

016 Usually create text nodes and Create element nodes for use.

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 nodes in jQuery doesn’t have to be so troublesome:

024 $('< >') ;

025 Like createElement(), the new element node created will not be automatically added to the document.

026 If you want to add it to the document, you can use the append() or insertAfter() method or before () method in jQuery.

027 For example:

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

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

030

031 3. Copy node

032 Traditional javascript method, copy node:

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);//The difference between true and false

039 document.body.appendChild(newpara);

040 Note:

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

042 false: Only < p>< /p> will be cloned, the text inside will not be cloned.

043 You can use firebug to see.

044

045 Copy node in jQuery:

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

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

048 var clone_a = a.clone();

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

050

051 Like createElement(), the copied new element node will not be automatically added to in the document.

052 If you want to add it to the document, you can use the append() or insertAfter() method or before () method in jQuery.

053 Another note: if the ID is the same after cloning, don’t 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 child node to the element, and insert the new node at the end.

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

061 document.body.appendChild(container);

062

063 insertBefore():

064 As the name suggests, it inserts a new node in front of the target node.

065 Element.insertBefore( newNode , targerNode );

066

067 Inserting nodes in jQuery is much more than what javascript comes with,

068 For example:

069 .append()

070 .appendTo( )

071 .prepend()

072 .prependTo()

073 .after()

074 .insertAfter()

075 .before()

076 .insertBefore()

077 So operate on dom The simplification is also one of the highlights of jquery.

078

079

080 5. Delete node

081 Traditional javascript method, delete node:

082 For example:

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

084 var c = b.parentNode;

085 c.removeChild(b);

086

087 Delete node in jQuery:

088 For example:

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

090

091 6. Replace node

092 Traditional javascript method, replace node:

093 For example:

094 Element.repalceChild( newNode , oldNode );

095 oldNode must be a child node of Element.

096

097 Replacement node in jQuery:

098 For example:

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

100

101 7, set attributes, get attributes

102 Traditional javascript method, set attributes, get attributes:

103 For example:

104 setAttribute();//Set

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

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

107 Regardless of whether there was a title attribute before, the future value is my demo.

108

109 getAttribute();//Get

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

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

112 When getting, If the attribute does not exist, return empty,

113

114 Set attributes in jQuery, get attributes:

115 For example:

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

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

118

119 8, Find nodes

120 Find nodes for jQuery It’s a piece of cake.

121 The most interesting thing about jQuery is the search node, which is commonly known as 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 of JavaScript and jQuery. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!