Home >Web Front-end >JS Tutorial >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)!