Using createElement to Create New Elements on the Fly
There are even more ways to change Web pages on the fly with dynamic HTML. For example, you can use the createElement method to create entirely new elements. Take a look at the createElement.html application, which appears in Figure 11.22.
Figure 11.22: The createElement.html application
When you click the button, a new <div> element containing text, as well as a new text field, are created using the createElement method, as shown in Figure 11.23.
Figure 11.23: Creating new elements in the createElement.html application
When you click the button again, another new <div> element and text field are created, as shown in Figure 11.24.
Figure 11.24: Creating more new elements in the createElement.html application
In this application the button is connected to a function named create:
<body> <center> <h1> Using createElement to create new elements </h1> </center> <div > <input type="button" value="Click me" onclick="create()"> </div> </body>
The create function starts by creating a new <div> element using the document’s createElement method:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; . . . } </script> </head> then the code creates a new <input> element for the text field:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv, newTextfield; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; newTextfield = document.createElement("input"); . . . } </script> </head> You can configure the attributes of new elements as properties of their objects. For example, here’s how you set the type and value attributes of the new text field:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv, newTextfield, newText; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; newTextfield = document.createElement("input"); newTextfield.type = "text"; newTextfield.value = "Hello!" . . . } </script> </head> To insert some text into the <div> element, you need to create a new text node, which you can do with the document element’s createTextNode method. This new text node contains the text “Here is a new text field:”:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv, newTextfield, newText; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; newTextfield = document.createElement("input"); newTextfield.type = "text"; newTextfield.value = "Hello!" newText = document.createTextNode("Here is a new text field: "); . . . } </script> </head> Then you can insert the text node before the <div> element in the Web page using the insertBefore method:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv, newTextfield, newText; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; newTextfield = document.createElement("input"); newTextfield.type = "text"; newTextfield.value = "Hello!" newText = document.createTextNode("Here is a new text field: "); newDiv.insertBefore(newText, null); . . . } </script> </head> and you can also insert the text field before the <div> element:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv, newTextfield, newText; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; newTextfield = document.createElement("input"); newTextfield.type = "text"; newTextfield.value = "Hello!" newText = document.createTextNode("Here is a new text field: "); newDiv.insertBefore(newText, null); newDiv.insertBefore(newTextfield, null); . . . } </script> </head> Then you insert the new <div> element:
<head> <title> Using createElement to create new elements </title> <script language="JavaScript"> function create() { var newDiv, newTextfield, newText; newDiv = document.createElement("div"); newDiv.id = "NewDIV"; newTextfield = document.createElement("input"); newTextfield.type = "text"; newTextfield.value = "Hello!" newText = document.createTextNode("Here is a new text field: "); newDiv.insertBefore(newText, null); newDiv.insertBefore(newTextfield, null); document.body.insertBefore(newDiv, null); } </script> </head> And there you have it. Now you’re creating new elements, a useful skill for Ajax programmers. When you need to download and display new data, you can create new elements, such as list controls, in which to display that data. In fact, you can even create dynamic tables.
