Creating New Elements


You also can create new elements with the document object's createElement method (see Table 9.5) and insert them into a document on-the-fly with methods such as insertBefore (see "The insertBefore Method" in Chapter 6) after configuring them.

We've seen createElement in passing before, but we haven't taken a systematic look at this process. The important thing to realize is that the mere creation of a new element does not insert that element into the document. Instead, you first configure the new element using various properties such as name and value . When the element is ready for use, you can insert it into the document using methods such as insertBefore . (This method was introduced in Internet Explorer 5.0 and is now supported in Netscape Navigator 6.0.)

Here's an example where I'm creating a new button, and then configuring that button with the name , type , value , and onclick properties to connect that button to an event handler that displays an alert box. Then I insert the button into a web page just before another button by passing that other button as the reference node to insertBefore (you'll need version 6+ if you're using Netscape Navigator to use the createElement method):

(Listing 16-12.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Creating New Elements          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function addMore()   {   var newButton   newButton = document.createElement("INPUT")   newButton.name = "button2"   newButton.type = "BUTTON"   newButton.value = "Click Me Too!"   newButton.onclick = alerter   document.form1.insertBefore(newButton, document.form1.button1)   }  function alerter()              {                  alert("You clicked the button!")              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Creating New Elements</H1>          <FORM NAME="form1">              <INPUT TYPE="BUTTON" NAME="button1" VALUE="Click Me!" ONCLICK="addMore()">          </FORM>      </BODY>  </HTML> 

You can see the results in Figure 16.10. In that figure, I've clicked the Click Me! button, which creates and displays the new Click Me Too! button, which, when clicked, displays an alert box.

Figure 16.10. Adding new elements on-the-fly.

graphics/16fig10.gif

You also can use the Internet Explorer method insertAdjacentElement (see "The insertAdjacentElement Method" in Chapter 6) to insert elements; here's what the addMore function would look like with that method:

 function addMore()  {      var newDiv, newTextField, newText      newButton = document.createElement("INPUT")      newButton.name = "button2"      newButton.type = "BUTTON"      newButton.value = "Click Me Too!"      newButton.onclick = alerter  document.form1.button1.insertAdjacentElement("beforeBegin", newButton)  } 

Here's another example, this one from Chapter 13, "Working with Text and Select Controls" (Listing 13.11); in this case, we're adding and removing <SELECT> items when the user clicks buttons (you'll need version 6+ if you're using Netscape Navigator to use the createElement method):

 <HTML>      <HEAD>          <TITLE>Changing Select Options</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function colors()   {   document.form1.select1.options[0].text = "Red"   document.form1.select1.options[1].text = "White"   document.form1.select1.options[2].text = "Blue"   if(navigator.appName == "Netscape") {   document.form1.select1.remove(3)   }   if (navigator.appName == "Microsoft Internet Explorer") {   document.form1.select1.options.remove(3)   }   }   function numbers()   {   document.form1.select1.options[0].text = "1"   document.form1.select1.options[1].text = "2"   document.form1.select1.options[2].text = "3"   if(navigator.appName == "Netscape") {   var option1 = document.createElement("OPTION")   document.form1.select1.add(option1, null)   option1.innerHTML = "4"   }   if (navigator.appName == "Microsoft Internet Explorer") {   var option1 = document.createElement("OPTION")   document.form1.select1.options.add(option1)   option1.innerHTML = "4"   }   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>Changing Select Options</H1>          <FORM NAME="form1">              <SELECT NAME="select1">                  <OPTION SELECTED>Red                  <OPTION>White                  <OPTION>Blue              </SELECT>              <INPUT TYPE="BUTTON" VALUE="Colors" onClick="colors()">              <INPUT TYPE="BUTTON" VALUE="Numbers" onClick="numbers()">          </FORM>      </BODY>  </HTML> 

You can see the results in Chapter 13, in Figure 13.12.

That's how creating new elements and inserting them into web pages on-the-fly works:You create the new element, configure it, and insert it into the document. That's all it takes!



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

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