DOM: erzeugte Kindknoten nochmals dyn. erweitern?

[Struppi]

ok 120 Zeilen war übertrieben aber dennoch... kann ja mal ne Kostprobe geben. dieser HTMl Code:

Der so z.b. ungültig ist und falsch verschachtelt, ein Grund DOM Funktionen zu verwenden da passiert sowas nicht so leicht. Auch halte ich die meisten Attribute für unnötig, sowohl die IDs als auch die Klassen, braucht man nicht in dieser Fülle.

Ergibt - mehr oder weniger - diesen DOM Code (nicht auf Feinheiten achten es geht hier nur um die Größenverhältnisse)

Soweit ich das sehe entspricht der Code nicht dem HTML Code, den du als Beispiel zeigst.

Ich würd' es in etwa so machen (der einzige Unterschied zum HTML Code ist, dass ich nicht auf deine Unterscheidung von id und name geachtet habe, da ich das wie gesagt so nicht für nötig halte).

Erst die Helper Funktionen

String.prototype.createTag = function(tag, prop) {  
 var el = document.createElement(tag || 'div');  
 for(var a in prop) {  
  if(typeof prop[a] == 'object') for(var aa in prop[a]) el[a][aa] = prop[a][aa];  
  else el[a] = prop[a];  
 }  
  el.appendChild(this.toNode());  
  return el;  
}  
String.prototype.toNode = function() {  
  return document.createTextNode(this);  
}  
  
function createInput(type, name, val, prop) {  
 //if(typeof val == 'undefined') val = '';  
 var el = document.createElement('input');  
  for(var a in prop) el[a] = prop[a];  
 el.type = type || 'text';  
 el.name = el.id = name;  
 if(typeof val != 'undefined') el.value = val;  
 return el;  
}  
function textfield(name, val, prop) {  
 return createInput('text', name, val, prop);  
}  
function nbsp() {return '\u00a0'.toNode()}  

Dann kommst du mit den Code hin:

var tmp;  
var p = document.createElement('p');  
  
// Element zitat_foot  
var link = 'Kommentar schreiben'.createTag('a', { href: ''} );  
var zitat_foot = 'Zugefügt am 30.10.2008 | 0 Kommentare | '.createTag('div', {className: 'zitat_foot'});  
zitat_foot.appendChild(link);  
  
p.appendChild(zitat_foot);  
  
// Formular  
var form = document.createElement('form');  
form.name = 'comment'; // Ist eigentlich unnötig!  
form.className = 'commentform';  
form.action = '...';  
  
tmp = document.createElement('div');  
tmp.className = 'commentform';  
  
tmp.appendChild('Ihr Name:'.toNode());  
tmp.appendChild(textfield('name'));  
  
tmp.appendChild('Ihre Emailadresse:'.toNode());  
tmp.appendChild(textfield('email'));  
  
tmp.appendChild(createInput('hidden', 'id', 'id'));  
  
form.appendChild(tmp);  
  
tmp = document.createElement('div', {className: 'commentform'});  
tmp.appendChild('Ihr Kommentar zu diesem Zitat. HTML '.toNode());  
tmp.appendChild('nicht'.createTag('b'));  
tmp.appendChild(' erlaubt, auch keine Links: '.toNode());  
  
form.appendChild(tmp);  
  
tmp = document.createElement('div');  
var textarea = document.createElement('textarea');  
textarea.cols = 70;  
textarea.rows = 5;  
textarea.id = 'comment_text';  
textarea.name = 'comment';  
  
tmp.appendChild(textarea);  
  
form.appendChild(tmp);  
  
tmp = document.createElement('div');  
  
tmp.appendChild(createInput('submit', 'Kommentar senden'));  
tmp.appendChild(nbsp());  
tmp.appendChild(nbsp());  
tmp.appendChild('sdfasdf'.createTag('span', {id:'display', style:{textAlign:'right'}}));  
  
form.appendChild(tmp);  
  
p.appendChild(form);  
alert(p.innerHTML);  
window.onload = function() {  
document.body.appendChild(p);  
}  
  

Der läßt sich sicher noch verfeinern, ist aber nicht soviel mehr Aufwand und vor allem, wenn deine Seite sehr JS lastig ist, kannst du mit den ganzen Objekten weiterarbeiten.

Struppi.