DOM-node mit mögl. wenig Code erzeugen

[Schmidt]

Hallo,

ich möchte je nach Klick auf einen bestimmten Button meiner Seite DOM-Elemente hinzufügen.

So wird es in SELFHTML beschrieben und funktioniert auch:

  
//SPAN  
var $span = document.createElement("span");  
  
var $_class = document.createAttribute("class");  
$_class.nodeValue = "bla";  
$span.setAttributeNode($_class);  
  
  
//child INPUT  
var $newA = document.createElement("input");  
  
var $name = document.createAttribute("name");  
$name.nodeValue = "kommentar";  
$newA.setAttributeNode($name);  
  
var $type = document.createAttribute("type");  
$type.nodeValue = "text";  
$newA.setAttributeNode($type);  
  
var $size = document.createAttribute("size");  
$size.nodeValue = "40";  
$newA.setAttributeNode($size);  
  
var $maxlength = document.createAttribute("maxlength");  
$maxlength.nodeValue = "40";  
$newA.setAttributeNode($maxlength);  
  
  
//append INPUT  
$span.appendChild( $newA );  
  
//append SPAN  
document.getElementById("zu").appendChild( $newA );  

Ich müsste für jeden Button eine solche Definition vornehmen. Gib es eine weniger Code-Intensive Möglichkeit dies zu erledigen?

Etwas in dieser Art vielleicht?

  
$test = document.createElement("span");  
$test.class = "bla";  
$test.input.name = "kommentar";  
...  

Habt ihr Ideen wie man den Code möglichst klein halten könnte?

Danke