Comparison of common JavaScript and jquery Methods

1. Create an object and add the document

Javascript: var para = Document. createelement ('P'); document. Body. appendelement ('P'); // append the P elementThe lastchild subnode of the body. If you want to insert the newly created P element to an existing element, you can use the insertbefore () method.

Jquery: jquery provides four methods to insert new elements before or after existing elements: append (), appendto (), prepend (), and prependto ().CodeExample:

<P> World! </P>

$ ( 'P' ). Append ( '<B> hello! </B>' ); // Output: <p> world! <B> hello! </B> </P> $ ( '<B> hello! </B>' ). Appendto ( 'P' ); // Output: Same as above $ ( 'P' ). Prepend ( '<B> hello! </B>' ); // Output: <p> <B> hello! </B> world! </P> $ ( '<B> hello! </B>' ). Prependto ( 'P' ); // Output: Same as above 2. Insert the new element javascript: insertbefore (). The format is parentelement. insertbefore (newelement, targetelement); newelement is the newly created element, and targetelement is the target element jquery: it also provides four methods to insert new elements before or after existing elements: After (), insertafter (), before (), insertbefore (); 3. Copy node javascript: var newreference = node. clonenode (Boolean); this method has only one Boolean parameter, and its optional values can only be true or false. This parameter determines whether to copy the child nodes of the copied node to the new node. Jquery: Clone () // After copying a node, the copied new element does not have any behavior. Clone (true) // copy the node content and bound events. 4. Delete the node: javascript: vaR newreference = element. removechild (node) // delete a subnode from a given element. The jquery: Remove () method is used to delete all matching elements from the Dom. Remove () this method can also be used with other filter selectors. $ ('Ul li'). Remove (Li [title! = 'Hello']); the empty () method is used to clear the node 5. The wrapped node: javascript has not yet been implemented: jquery: Wrap () // wrap the matching element individually with the structural tags of other elements wrapall () // wrap all matching elements with one element wrapinner () // wrap the child content of the matching element with other structured tags. 6. Attribute operation: Set the attribute node and search for the attribute node. jquery: Set and search for the attribute nodes are both ATTR (). Code example: $ ( 'P' ). ATTR ( 'Title' ); // Obtain the title attribute of the P element; $ ( 'P' ). ATTR ( 'Title' , 'My title' ); // Set the title attribute of the P element $ ( 'P' ). ATTR ( 'Title' : 'My title' , 'Class' : 'Myclass' ); // When multiple attributes need to be added, they can be separated by commas (,) in the form of a "Name: Value" pair. 7. Replace nodes: Javascript: var newreference = element. replaceChild (newchild, oldchild); jquery: replacewith (), replaceall () 8, CSS-DOM operation: javascript: Format: element. style. property, CSS-DOM can read and set the style object properties, its disadvantage is that it cannot be used to extract external CSS set style information jquery: Format: Detail (selector).css () Detail .css () in addition, jquery also provides the height () and width () methods to obtain the height and width of an element (with no unit), while CSS (height), CSS (width) returns the height and width, with the unit. NOTE: If "font-size" is like "-" in CSS, it must be indicated in the upper case of the first letter, such as fontsize.