Usage of document.createelement () in JavaScript

When analyzing the code, find your own blind spot--document.createelement (), surf some, and summarize the points of experience.

Document.createelement () is an object that is created in the object to be used in conjunction with the appendchild () or InsertBefore () methods. where the AppendChild () method adds a new child node at the end of the node's child nodes list. The InsertBefore () method inserts a new node at any point in the node's child nodes list.

The following example illustrates the use of document.createelement () . <div id= "board" ></div>

Example 1:

<script type= "Text/javascript" >
var board = document.getElementById ("board");
var e = document.createelement("input");
e.type = "button";
E.value = "This is a small example of a test load";
var object = board. appendchild (e);
</script>

effect: loads a button in the label board with the property value "This is a small example of a test load."

Example 2:

<script type= "Text/javascript" >
var board = document.getElementById ("board");
var e2 = document.createelement ("select");
E2.options[0] = new Option ("Add-on 1", "");
E2.OPTIONS[1] = new Option ("Add-On 2", "");
E2.size = "2";
var object = Board.appendchild (E2);
</script>

effect: loads a drop-down list box in the label board with the property value "add-in 1" and "Add-on 2".

 

Example 3:

<script type= "Text/javascript" >
var board = document.getElementById ("board");
var E3 = document.createelement ("input");
e4.setattribute ("type", "text");
E4.setattribute ("name", "Q");
E4.setattribute ("value", "Use SetAttribute");
E4.setattribute ("onclick", "Javascript:alert (' This is a test! ');");
var object = Board.appendchild (E3);
</script>

effect: loads a text box in the label board, with the property value "use SetAttribute". When you click on this text box, the dialog box "This is a test!" pops up.

as you can see from the example above, the parameters can be set by loading the properties of the object. Using e.type= "text" and E.setattribute ("type", "text") effects are consistent.

below, we use an example to tell the difference between the AppendChild () method and the InsertBefore () method .

For example, we want to insert a child node p in the following div: <div id= "test" ><p id= "x1" >Node</p><p>Node</p></div>

We can write this:

<script type= "Text/javascript" >
var otest = document.getElementById ("test");
var newNode = document.createelement ("P");
newnode.innerhtml = "This is a test";
The test starts here.
AppendChild Method:
Otest.appendchild (NewNode);
InsertBefore Method:
Otest.insertbefore (Newnode,null);
</script>

Through the above code, you can test to a new node is created under the node Div, and the node is the last node of the Div. Obviously, with this example, you know that both Appendchildhild and insertbefore can do the insertion of nodes.

In the example above there is a code:otest.insertbefore (newnode,null) , here InsertBefore have 2 parameters can be set, the first is the same as AppendChild, the second is its unique. not only can it be null, it can also be:

<script type= "Text/javascript" >
var otest = document.getElementById ("test");
var refchild = document.getElementById ("x1");
var newNode = document.createelement ("P");
newnode.innerhtml = "This is a test";
Otest.insertbefore (Newnode,refchild);
</script>

Effect: This example inserts a new node in front of the X1 node

Or:

<script type= "Text/javascript" >
var otest = document.getElementById ("test");
var refchild = document.getElementById ("x1");
var newNode = document.createelement ("P");
newnode.innerhtml = "This is a test";
Otest.insertbefore (newnode,refchild.nextsibling);
</script>

Effect: This example inserts a new node in front of the next node in the X1 node

Also available as:

<script type= "Text/javascript" >
var otest = document.getElementById ("test");
var newNode = document.createelement ("P");
newnode.innerhtml = "This is a test";
Otest.insertbefore (Newnode,otest.childnodes[0]);
</script>

This example inserts a new node in front of the first child node, or you can change the childnodes[0,1,...] To insert a new node in another location

because the attribute of the Visible insertbefore () method is to insert a new node in front of an existing child node, the use of the InsertBefore () method in example one can also insert a new node at the end of the child node list. Combining the two cases, the Discovery InsertBefore () method inserts the node, which can be anywhere in the list of child nodes.

From these examples, we can draw the following:

　　The AppendChild () method adds a new child node at the end of the node's child nodes list.

　　The InsertBefore () method inserts a new node at any point in the node's child nodes list.

Reprinted from: http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html

Usage of document.createelement () in JavaScript