View RSS Feed

im the :amr:

adding dynamic HTML elements with JS

Rate this Entry
by , 02-11-2009 at 02:33 PM (1332 Views)
any web developer will find himself in need to minimize the processing at the server for more effeicient and faster web application, thats why we use the word dynamic; the user recives a page and depending on his decisions the page will generate additional controls and html elements, for example if the user chooses that he lives in the US a listbox with the states will appear to choose from, but if he chooses another country from the list a textbox will appear to write the city that he lives in. the old method was to transfer him to another page depending on what he chooses which will make him visit the server more often and thats the last thing you want.
how to:
-im going to write a tutorial about which will have the code in it, for now i will demonstrate a simple example
lets create a simple list box with options in it:
Code:
 var mylist=document.createElement ('<select>');//creating the element first
 mylist.setAttribute ('name','gender');//setting it's attributes with setAttributes
 mylist.setAttribute ('id','lb_1');
//creating and appending option no.1
var myoption1= document.createElement("<option>");
myoption1.appendChild(document.createTextNode('male');
mylist.appendChild(myoption1);

var myoption2= document.createElement("<option>");
myoption2.appendChild(document.createTextNode('female');
mylist.appendChild(myoption2);

//now append "mylist" to any place on your HTML body
//can be in a table or a div
the above code shows how to make a listbox on the run, it may seem ineffiecient because of the size, we wrote like ten lines to make one listbox, imagine a complete input form!
thats why you need to make it object oriented, by making functions that takes the attributes of the HTML element
-conclusion:
using dynamic controls have special uses when you need to load a big number of controls, but when dealing with small forms its better off without any JS

Submit "adding dynamic HTML elements with JS" to Digg Submit "adding dynamic HTML elements with JS" to del.icio.us Submit "adding dynamic HTML elements with JS" to StumbleUpon Submit "adding dynamic HTML elements with JS" to Google

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. Jordan's Avatar
    JavaScript is very handy to make your web page interactive with the user. I've seen some pretty neat stuff done with it.