Muffinresearch Labs by Stuart Colville

Basic DOMTool Tutorial | 3 Comments

Posted in Code on 13th December 2006, 3:18 pm by

I’ve had some brilliant feedback on DOMTool and several people have emailed me asking for a basic tutorial on how to use the output. So if you’re familiar with using the DOM to add content to a page then this probably won’t be terribly exciting and you can carry on reading the next post in your feedreader :-) .

The Input

The first that’s needed is to decide what snippet of HTML you want to add to a document via javascript. For this example I will choose a very basic snippet that looks like this:

<form action="testsnippets_submit" method="get" action="">
  <label for="test1">Test 1</label><br>
  <input type="text" name="test1" value="" id="test1" ><br>

  <select name="test2">
    <option value="1">opt1</option>
    <option value="2" selected="selected">opt2</option>
    <option value="3">opt3</option>
  </select><br>

  <textarea rows="5" cols="60" name="tareatest">Testing textarea</textarea>  

  <p><input type="submit" value="Go"></p>
</form>

The Output

So if we put this into DOMTool and press “Create DOM Statements”. The output is as follows:


var form1=document.createElement('FORM');
form1.setAttribute('action','testsnippets_submit');
form1.setAttribute('method','get');
var label1=document.createElement('LABEL');
label1.setAttribute('for','test1');
form1.appendChild(label1);
var txt1=document.createTextNode('Test 1');
label1.appendChild(txt1);
var br1=document.createElement('BR');
form1.appendChild(br1);
var input1=ce('INPUT','test1');
input1.setAttribute('type','text');
input1.setAttribute('id','test1');
form1.appendChild(input1);
var br2=document.createElement('BR');
form1.appendChild(br2);
var select1=ce('SELECT','test2');
form1.appendChild(select1);
var option1=document.createElement('OPTION');
option1.setAttribute('value','1');
select1.appendChild(option1);
var txt1=document.createTextNode('opt1');
option1.appendChild(txt1);
var option2=document.createElement('OPTION');
option2.setAttribute('selected','selected');
option2.setAttribute('value','2');
select1.appendChild(option2);
var txt1=document.createTextNode('opt2');
option2.appendChild(txt1);
var option3=document.createElement('OPTION');
option3.setAttribute('value','3');
select1.appendChild(option3);
var txt1=document.createTextNode('opt3');
option3.appendChild(txt1);
var br3=document.createElement('BR');
form1.appendChild(br3);
var textarea1=ce('TEXTAREA','tareatest');
textarea1.setAttribute('cols','60');
textarea1.setAttribute('rows','5');
form1.appendChild(textarea1);
var txt1=document.createTextNode('Testing textarea');
textarea1.appendChild(txt1);
var p1=document.createElement('P');
form1.appendChild(p1);
var input2=document.createElement('INPUT');
input2.setAttribute('type','submit');
input2.setAttribute('value','Go');
p1.appendChild(input2);

In the process we are also warned that the compatibility function for creating named elements is required. This is because IE screws up adding name attributes into the DOM such that should you use setAttribute or the name property to set the name attribute, the name attribute is there but if you try and obtain that part of the DOM with innerHTML the name attribute is not seen.

So for full compatibility we need to use this function in our script and for the purposes of our example I will use this function. (To turn off this warning you can disable the compatibility mode in the options).

How to implement DOMTool’s output

Ok, so DOMTool has given us it’s output along with all of the nodes to append to the document, but how do you use this?

To make use of the output you need to create a function that runs the code generated by DOMTool. We also need to write a statement to append the top level element(s) to our chosen location. These are indicated by the “nodes to append” output.

So a very basic function would look like this: (Let’s assume we want to add our form inside of a div with an id of “domtooltest”)

function testDomTool(){

  // Start of output from DOMTool
  var form1=document.createElement('FORM');
  form1.setAttribute('action','testsnippets_submit');
  form1.setAttribute('method','get');
  var label1=document.createElement('LABEL');
  label1.setAttribute('for','test1');
  form1.appendChild(label1);
  var txt1=document.createTextNode('Test 1');
  label1.appendChild(txt1);
  var br1=document.createElement('BR');
  form1.appendChild(br1);
  var input1=ce('INPUT','test1');
  input1.setAttribute('type','text');
  input1.setAttribute('id','test1');
  form1.appendChild(input1);
  var br2=document.createElement('BR');
  form1.appendChild(br2);
  var select1=ce('SELECT','test2');
  form1.appendChild(select1);
  var option1=document.createElement('OPTION');
  option1.setAttribute('value','1');
  select1.appendChild(option1);
  var txt1=document.createTextNode('opt1');
  option1.appendChild(txt1);
  var option2=document.createElement('OPTION');
  option2.setAttribute('selected','selected');
  option2.setAttribute('value','2');
  select1.appendChild(option2);
  var txt1=document.createTextNode('opt2');
  option2.appendChild(txt1);
  var option3=document.createElement('OPTION');
  option3.setAttribute('value','3');
  select1.appendChild(option3);
  var txt1=document.createTextNode('opt3');
  option3.appendChild(txt1);
  var br3=document.createElement('BR');
  form1.appendChild(br3);
  var textarea1=ce('TEXTAREA','tareatest');
  textarea1.setAttribute('cols','60');
  textarea1.setAttribute('rows','5');
  form1.appendChild(textarea1);
  var txt1=document.createTextNode('Testing textarea');
  textarea1.appendChild(txt1);
  var p1=document.createElement('P');
  form1.appendChild(p1);
  var input2=document.createElement('INPUT');
  input2.setAttribute('type','submit');
  input2.setAttribute('value','Go');
  p1.appendChild(input2);
  // End of output from DOMTool

  // our target div
  var dtt = document.getElementById('domtooltest');

  // append the main node as shown in the "node to append" output
  dtt.appendChild(form1);

}

Now let’s put that together with a link to execute the insertion so that when we click the link the form is inserted.

View the example: DOMTool example.

Now if the “nodes to append” output displayed several elements like so:

form1
p1
p2

We could just simply carry out an appendChild for each of them like so:

…
  // our target div
  var dtt = document.getElementById('domtooltest');

  // append the main node as shown in the "node to append" output
  dtt.appendChild(form1);
  dtt.appendChild(p1);
  dtt.appendChild(p2);

}

Thus appending each of them to our target element.

Post Tools

  • http://milo.peety-passion.com milo

    Looks like a nifty little work, i’ll try that for sure.

  • Mark

    Excellent work. Thank you.

  • Ivanhoe

    Muy bien explicado, era lo que andaba buscando… :)
    Gracias.

GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Ubuntu: add-apt-repository: command not found|(3)

When you’re using a minimal Ubuntu install if you find the ‘add-apt-repository’ command is missing (it’s useful for adding PPAs and other repositories), then simply run:

sudo apt-get install python-software-properties

Photos on Flickr

© Copyright 2004-12 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.532s.