I. Query
Js: document. getElementById ("id"), document. getElementsByName ("name") (returns an array that can be added to [0]), document. getElementsByTagName ("Tag") (array)
Jquery: search by selector (refer to jQuey selector)
Ii. insert
Js:
VarinputElement = document. createElement ("input"); // Add a tag
InputElement. setAttribute ("type", "text"); // you can specify the attributes of a tag.
Document. getElementsByTagName ("div") [0]. appendChild (inputElement); // do not forget to add the created element to an element (add a subnode)
Jquery:
Varli1 = "<li> what I want to learn about frameworks </li>"; // $ ("<li> what I want to learn about frameworks </li> ");
Var li2 = "<li> I want to find a job with a monthly salary of 5 k </li> "; // $ ("<li> I want to find a job with a monthly salary of 5 k </li> ");
Var li3 = "<li> 00:18 </li> ";
$ ("Ul"). append (li1); // you can add a jqurey object or a self-string, which is the same as the appenChild () method in js.
$ ("Ul"). prepend (li2); // Add the first node in ul
$ ("Ul li: eq (1)"). after (li3); // Add an element next to it and add insertAfter.
Iii. Delete
Js:
Varbr = document. createElement ("br ");
Varbody = document. getElementsByTagName ("body") [0]; // It returns an array.
Body. appendChild (br); // Add
RemoveChile ("br"); // Delete
Jquery:
Var $ remove = $ ("ul li: eq (1)"). remove (); // return the deleted object
$ ("Ul"). append ($ remove); // Delete $ remove from ul
$ ("Ul li"). remove ("li [title! = 2] ");
$ ("Li [title = 2]"). empty (); // clear the element content, which is still on the page
4. Copy
Js: (convert)
CloneNode (deepBoolean)
Copy and return the copy node of the current node. The copy node is an isolated node. It copies the attributes of the original node. Before adding the new node to the document, modify the ID attribute as needed to ensure that the ID is unique.
This method supports a Boolean parameter. When deepBoolean is set to true, all subnodes of the current node are copied, including the text in the node.
<Html>
<Body>
<P id = "mynode"> test </p>
<Script language = "javascript">
P = document. getElementById ("mynode ")
Pclone = p. cloneNode (true );
P. parentNode. appendChild (pclone );
</Script>
</Body>
</Html>
Jquey:
$ (This ). clone (true ). appendTo ("ul"); // $ (this) Each clicked object is converted to a jquery object. clone (true) true indicates that the event is also copied to it.
5. Replace
Js: (convert)
ReplaceChild (newChild, oldChild)
Replace one subnode of the current node with another node.
<Html>
<Body>
<Div id = "mynode2">
<Span id = "orispan"> span </span>
</Div>
<Script language = "javascript">
Var orinode = document. getElementById ("orispan ");
Var newnode = document. createElement ("p ");
Var text = document. createTextNode ("test ppp ");
Newnode. appendChild (text );
Document. getElementById ("mynode2"). replaceChild (newnode, orinode );
</Script>
</Body>
</Html>
Jquery:
$ ("Ulli: eq (1)"). replaceWith ("<li> Friday </li>"); // replace the previous
$ ("<Li> Saturday </li>"). replaceAll ("li: eq (2)"); // Replace
6. Packages
Js:
Jquey:
$ ("P"). wrap ("<ahref = 'HTTP: // www.google.com> '> </a>"); // wrap p with a hyperlink
$ ("P"). wrapInner ("<ahref = 'HTTP: // www.baidu.com '> </a>"); // place the hyperlink in p.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
