createElement() - a, table, form*

for IE5+ and Netscape 6

* The form example will NOT work with IE5+ for Mac

createElement() is a DOM method that let's you create new document elements. Once you've created an element you can use the appendChild() method to add it to your document.

Here's a simple example: we'll create a horizontal rule and put it into div id="test1".

<script>
function makeHR(){
var newHR = document.createElement('hr');
document.getElementById('test1').appendChild(newHR);
}
</script>

</div>

Click here to create and add the horizontal rule.

Easy, right? But what if you want to create something more complex like hyperlinks, tables or forms? Those elements call for the use of other methods such as createTextNode(), and setAttribute().

The good news is, once you understand how to create those three elements, you'll have the skills to tackle all other elements.

createElement('a')

Start out with the statement "document.createElement('a')". At this point that element could become either an anchor or a link. What's going to differentiate one from the other are the attributes you apply to it.

We're going to create a link, so we're going to need to give the element an href and a text node. Then, just to make things interesting we'll assign it a style class called "contrast" ( .contrast {color:#090}, a:hover.contrast {color:#900} ). Once that's done we'll put the link into div id="linkTest".

<script>
function makeLink(){

  var newLink=document.createElement('a');
  newLink.setAttribute('href','removeChild.html');
  // - use 'className' to create the equivalent of class="contrast"
  newLink.className='contrast';

  var linkText=document.createTextNode('click here to see how to use removeChild()');
  newLink.appendChild(linkText);
  document.getElementById('linkTest').appendChild(newLink);

}
</script>

</div>

Click here to create and add the new link.

Mouse over and click the link to check that href and class attributes were assigned.

createElement('table')

What we're going to do is create a table with some text in it using the createElement() and createTextNode() methods and then we're going to put it into a div id="tableTest" using the appendChild() method.

<script>
function makeTable() {
  var ourDiv=document.getElementById('tableTest');
  var t=document.createElement('table');  	// - start by creating the table element
  var tb=document.createElement('tbody');  	// - create a tbody element 
  // - !! YOU MUST INCLUDE THE TBODY TAG FOR THIS EXAMPLE TO WORK IN WIN IE5+ !! 
  t.style.border='2px  ridge';
  t.style.width='200px';
  var tr=document.createElement('tr');  	// - now create the tr and td elements
  var td=document.createElement('td');
  td.style.textAlign='right';
  td.style.padding='5px';
  
  var tdText=document.createTextNode('This is the text node');  // - create the text that will go in the table cell
  
  // - Now start building the table.  It's like filling a big container with successively smaller ones, just in reverse

  td.appendChild(tdText);  					// - put the text node in the table cell
  tr.appendChild(td); 						// - put the cell into the row
  tb.appendChild(tr); 						// - put the row into the tbody
  t.appendChild(tb);						// - put the tbody into the table
  ourDiv.appendChild(t); 					// - put the table into the div
}
 </script>

</div>

click here to insert table into div

createElement('form')

Last, but certainly not least, we come to forms. At their most basic level, you can create forms that will work with both IE5+ and Netscape 6.

By now you should be familiar with all the methods used below. We'll put our new form into the div id="formTest".

<script>
function makeForm(){
  
  // -  create the form element and it's attributes
  var f=document.createElement('form');
  f.setAttribute('name','myForm');
  f.setAttribute('action','createElement_test.html');
  f.setAttribute('target','_blank');
  f.setAttribute('method','get');
  
  var formText=document.createTextNode('Enter your name: ');

  // -  next, create a text input where you'll enter your name
  var yourName=document.createElement('input');
  yourName.setAttribute('type','text');
  yourName.setAttribute('name','NAME');
  yourName.setAttribute('value','');
	
  // -  create a submit input to submit the form
  var b=document.createElement('input');
  b.setAttribute('type','submit');
  b.setAttribute('value','click to test this form');

  // -  finally, append the text node, the text input, and the submit input to the form 
  f.appendChild(formText);
  // -  put a line break between the text node and the inputs
  f.appendChild(document.createElement('br'));
  f.appendChild(yourName);
  f.appendChild(b);
  document.getElementById('formTest').appendChild(f);

}
</script>

</div>

click here to insert form into div.

Give the form a try.

Okay, so far so good. But once you venture beyond these basic form elements you start running into trouble. For instance, using setAttribute to set event handlers such as "onsubmit" will work with Netscape 6 but, in most cases, not with IE5+. more info >>

IE5+ has a real problem with radio buttons created this way. They just dont work. Microsoft's web site says otherwise but they're either lying or misinformed.

Also, for both radio buttons and checkboxes, with IE you can only set the checked value using your_checkbox.defaultChecked=true. The checkboxes will work just fine but you won't be able to check any other radio button.

One last note: when you're creating more than 1 instance of an element, it's more efficient to incorporate the cloneNode() method.

PXL8 2003