The comparison _javascript techniques of jquery and JavaScript node creation methods

First, create the node:

Nodes are the basis of the DOM structure, and according to the DOM specification, nodes are a broad concept that contains elements, attributes, text, documents, and comments. But in actual development, to dynamically create content, the main operations of the node includes elements, attributes and text.

1. Requirements: Create a H1 tag and add it as a child node of the DIV element to the DOM node tree.

2, the basic idea is: first create a H1 element object, and then add to the document.

3, the following are two ways to achieve:

jquery mode
var $h 1 = $ ("
 
 

JavaScript way
var div = document.getElementById ("Div1");
var H1 = document.createelement ("h1");//Create H1 Object
h1.setattribute ("title", "Create Node");//create attribute node for H1 object and set property value
H1.setattribute ("Class", "Head"),//H1 object Transaction Price attribute node class, and Set property value
var txt = document.createtextnode (" jquery creates node comparisons with JavaScript ");
H1.appendchild (TXT);//Add text to the element node
div.appendchild (H1);//Create H1 object to Div

4, two ways of comparison:

1, code input: jquery Create element node operation is simple, only two lines of code can be quickly implemented. The JavaScript implementation is troublesome, the user needs to create the element node and the text node separately, then adds the text node to the element node step-by-step, and finally can add to the DOM structure tree.

2, from the execution point of view: In the Safari browser, the JavaScript implementation is faster than the jquery implementation of more than 80 times times, and in the slowest execution of IE browser, the difference is more than 10 times times

The above is the entire contents of this article, there are problems can be linked to the small, the next article about jquery and JavaScript insert elements of the method of comparison, we can focus on ...