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.

image from book
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.

image from book
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.

image from book
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.



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net