My Blog

Recently I discovered that using innerHTML can cause problems when you are heavily modifying the DOM via javascript. A co-worker was nice enough to introduce me to the createElement and appendChild methods.

Creating a drop down

var select = document.createElement('select');
select.id='student';
select.name='student';
select.className='fieldGray';
select.style.fontSize='10px';

Creating an input box

var input = document.createElement('input');
input.id='tip_amount';
input.name='tip_amount';
input.className='fieldGray';
input.style.width='30px';
input.onblur=getTip;

Now to append these elements to the DOM

var div = document.getElementById('destinationDiv');
div.appendChild(select);
div.appendChild(input);

Resources
http://developer.mozilla.org/en/docs/DOM:document.createElement
http://developer.mozilla.org/en/docs/DOM:element.appendChild

Related posts:

1. alter css values dynamically with javascript
2. looping through form fields in javascript
3. Doing Math in JavaScript umm…sucks
4. More JavaScript Array Methods (push and join)
5. using JSON to pass JavaScript arrays to PHP via Ajax

This entry was posted on Monday, February 25th, 2008 at 7:07 pm and is filed under JavaScript and Ajax. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.