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

[Struppi]

var $_class = document.createAttribute("class");
$_class.nodeValue = "bla";
$span.setAttributeNode($_class);

Das ist überflüssig, das das Attribut bereits existiert, aber in JS aufgrund Namenskonflikten, className heißt. die anderen Attribute kannst du direkt ansprechen.

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

eine eigene Funktion schreiben.

Struppi.

[Schmidt]

var $_class = document.createAttribute("class");
$_class.nodeValue = "bla";
$span.setAttributeNode($_class);

Das ist überflüssig, das das Attribut bereits existiert, aber in JS aufgrund Namenskonflikten, className heißt. die anderen Attribute kannst du direkt ansprechen.

Ich verstehe nicht ganz was du mit direkt ansprechen meinst.

So etwa?

$test = document.createElement("span");  
$test.className = "bla";  
$test.id = "erstes";  
$test.style = "color: black;";  

eine eigene Funktion schreiben.

Habe ich gemacht:

function mknode($Type,$AttrStr){  
  
 //Element Erzeugen  
 var $element = document.createElement($Type);  
  
 //Attributsstring in Paare aufteilen  
 var $AttrPaar = $AttrStr.split("&");  
 alert($AttrPaar.length);  
 //für jedes Paar  
 for (var $i = 0; $i < $AttrPaar.length; $i++){  
  //Paare in Attr und Val aufteilen  
  var $AttrVal = $AttrPaar[$i].split("=");  
  //Attr und Val erzeugen  
  var $Attr = document.createAttribute($AttrVal[0]);  
  $Attr.nodeValue = $AttrVal[1];  
  //Attr und Val Element hinzufügen  
  $element.setAttributeNode($Attr);  
 }  
 return($element);  
}  
  
   function add($id){  
    document.getElementById($id).appendChild( mknode('img','src=img/bild.pmg') );  
   }

Folgendes Problem bei der Funktion: Ich führe sie aus, es gibt keine Fehler oder Hinweise, aber es erscheint nichts.
Hab ich etwas übersehen?

Danke

[Kai345]

[latex]Mae  govannen![/latex]

document.getElementById($id).appendChild( mknode('img','src=img/bild.pmg') );

pmg? Hast du das auch im getesteten Code oder nur hier im Forum?

Cü,

Kai

[Schmidt]

document.getElementById($id).appendChild( mknode('img','src=img/bild.pmg') );

pmg? Hast du das auch im getesteten Code oder nur hier im Forum?

HA! Ich danke dir. Es lag wirklich daran. (Ich hätte allerdings erwartet, dass dieses Symbol bei erscheint welches doch üblicherweise bei falschen src angaben erscheint)

Danke

[Kai345]

[latex]Mae  govannen![/latex]

pmg? Hast du das auch im getesteten Code oder nur hier im Forum?

HA! Ich danke dir. Es lag wirklich daran.

Ich baue dafür ständig <spam> oder </spam> Tags ein :D

Cü,

Kai

[Beat]

Ich baue dafür ständig <spam> oder </spam> Tags ein :D

Leider werden die ignoriert statt ausgeblendet.

mfg Beat

[Struppi]

Ich verstehe nicht ganz was du mit direkt ansprechen meinst.

So etwa?

$test = document.createElement("span");

$test.className = "bla";
$test.id = "erstes";
$test.style = "color: black;";

  
Ja, bis auf das letzte. Die style Attribute musst du auch einzeln ansprechen.  
  
Struppi.

[Schmidt]

Danke.

Das mit className kannte ich nicht.

[molily]

Hallo,

$test.style = "color: black;";

Die style Attribute musst du auch einzeln ansprechen.

im Prinzip ginge übrigens .style.cssText = color:black; background-color:white", aber das ist Standard, nicht Realität

Mathias