Jump to content

Check out our Community Blogs

- - - - -

adding dynamic HTML elements with JS

Posted by amrosama, 11 February 2009 · 374 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:
 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>");

var myoption2= document.createElement("<option>");

//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
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

  • 0

JavaScript is very handy to make your web page interactive with the user. I've seen some pretty neat stuff done with it.
    • 0
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download