DOM: erzeugte Kindknoten nochmals dyn. erweitern?

[Permafrost]

hallo
ich habe eine Liste von Zitaten dynamisch erzeugen lassen mittels eines XHR Aufrufes was eine XML Datei ausliest. Aus den Daten habe ich mir dyamisch Knoten und Kindknoten erzeugen lassen, und zum Schluss das ganze (zizatlist) in einen festen Punkt in der HTML Datei einhängen lassen:

  
$('domtable').appendChild(zitatlist);  prototye style bzw.  
  
document.getElementById("domtable").appendChild(zitatlist);

soweit sogut,funktioniert! Die Sache ist aber, ich möchte das frisch erzeugte DOM *nochmals* dynamisch verändern. Direkt unterhalb eines Zitats möchte ich ein Formular für Kommentare einhängen lassen. Geht aber nicht: an der betreffenden Stelle habe ich zB. ein <div id='01'> nun versuch ich mit

$("zitat_id").appendChild(kommentarknoten);

wobei ich , klar, dafür gesorgt habe daß zitat_id hier den richtigen Wert hat und 'kommentarknoten' richtig existiert. Funktioniert aber nicht:

$("zitat_id") is null

kann ich das also vergessen mit "DOM Elemente nochmals dynamisch verändern"?
kann ich davon ausgehen daß ein Konstrunkt wie $("zitat_id")  NUR auf die statischen Bereiche der HTML Datei zutrifft?

Danke, Gruß, gute Nacht

[Cheatah]

Hi,

an der betreffenden Stelle habe ich zB. ein <div id='01'>

diese ID ist ungültig. Sie muss mit einem Buchstaben beginnen.

Cheatah

[Struppi]

document.getElementById("domtable").appendChild(zitatlist);[/code]

soweit sogut,funktioniert! Die Sache ist aber, ich möchte das frisch erzeugte DOM *nochmals* dynamisch verändern. Direkt unterhalb eines Zitats möchte ich ein Formular für Kommentare einhängen lassen. Geht aber nicht: an der betreffenden Stelle habe ich zB. ein <div id='01'> nun versuch ich mit

$("zitat_id").appendChild(kommentarknoten);

Wieso nimmst du nicht direkt das Element zitalist um den Knoten einzuhängen?

zitatlist.appendChild(kommentarknoten);

Struppi.

[Permafrost]

danke für die Antworten.
Struppi eben :) ein Weilchen nachdem ich hier gepostet hatte kam mir die Erleuchtung -- die einzelnen Knoten existieren ja noch und sind nach der Erzeugung nicht einfach verschwunden! Also einfach deren Namen ausfindig machen und nutzen. Das war indes nicht gar so einfach -- der Knoten zitatlist beinhaltet ein <div> welcher alle Zitate umschliesst, der Knoten für en einzelnes Zitat hiess "z_gesamt" - in einer Schleife von n Zitaten n mal erzeugt und eingehängt. genau daran wollte ich aber neues DOM hängen. also habe ich mir ein Array gebaut und die einzelnen knoten z_gesamt[i] genannt und NUN konnte ich:

* den einzelnen jeweiligen Knoten
* und auch noch an der richtigen Stelle
ansprechen :-)  Der Aha Effekt ist in sonem Moment gewaltig. Hätte aber nicht gedacht daß DOM so ungeheuer aufwändig ist. 5 Zeilen HTML entsprechen da locker 120 Zeilen JS :-/  es muss da Assistenten geben - zB. HTML rein -> DOM code hinaus? Ich werde mich umsehen....

Danke, Gruß

Wieso nimmst du nicht direkt das Element zitalist um den Knoten einzuhängen?

zitatlist.appendChild(kommentarknoten);

Struppi.

[molily]

es muss da Assistenten geben - zB. HTML rein -> DOM code hinaus?

Äh, innerHTML?

Mathias

[Permafrost]

es muss da Assistenten geben - zB. HTML rein -> DOM code hinaus?

Äh, innerHTML?

Mathias

nein. was ich meinte wäre ein Tool, wo man HTML eingibt und was DOM ausgibt. Was man anschliessend in seinem aufwändigen JS verwenden kann. Sowas wie
"ich brauch schnell ne Tabelle, so soll die aussehen (code) spuck mir das mal aus" und das Tool gibt dann korrekt aus

teil1.createElement('table')
 teil2.createElement('tr')
 teil3.createElement('td')
 teil3.setAttribute('width','20')
 teil3.setAttribute('class','blah')
  ..usw.  bis schliesslich
 teil1.appendChild(teil1)

[Gunnar Bittersmann]

@@Permafrost:

teil1.createElement('table')
teil2.createElement('tr')
teil3.createElement('td')

Du hast ein wichtiges Teil vergessen: tbody. Oh Nostradamus ...

Live long and prosper,
Gunnar

[Permafrost]

Du hast ein wichtiges Teil vergessen: tbody.

ähäm. der einwand ist nicht ganz falsch aber das gehört nicht zum Topic :)

[molily]

was ich meinte wäre ein Tool, wo man HTML eingibt und was DOM ausgibt. Was man anschliessend in seinem aufwändigen JS verwenden kann.

Ja, ist mir klar. Aber wozu brauchst du ein Tool, was HTML-Code in JavaScript-Befehle umsetzt, die mittels DOM den Code erzeugen, wenn du innerHTML auch direkt den Code in ein Element schreiben kannst und dir den ganzen DOM-Quatsch sparen kannst?

"ich brauch schnell ne Tabelle, so soll die aussehen (code)

element.innerHTML = "<table>...</table>";

teil1.createElement('table')
teil2.createElement('tr')
teil3.createElement('td')
teil3.setAttribute('width','20')
teil3.setAttribute('class','blah')
  ..usw.  bis schliesslich
teil1.appendChild(teil1)

Und wozu brauchst du das, wenn nicht für oben genannte Zwecke?

Wie auch immer, es gibt Scripte, die das vereinfachen, allerdings mit einer eigenen Syntax (HTML in DOM-Befehle umzuwandeln wäre aus den genannten Gründen Unsinn):

http://die.netzspielwiese.de/blog/javascript-dom/2006-04/dom-builder-dom-elemente-einfacher-erstellen
http://svn.danwebb.net/external/DomBuilder/trunk/dombuilder.js

So etwas ähnliches kennt auch Prototype:
http://www.prototypejs.org/2007/5/12/dom-builder

In jQuery kann man z.B. schreiben:
$("<div><p>Hello</p></div>").appendTo("body");
http://docs.jquery.com/Core/jQuery#htmlownerDocument
Intern wird aber vermutlich auch innerHTML verwendet. Die Notwendigkeit einer separaten Syntax sah dort niemand ein.

Mathias

[Permafrost]

..wenn du innerHTML auch direkt den Code in ein Element schreiben kannst und dir den ganzen DOM-Quatsch sparen kannst?

innerHTML ist in dem Fall m.W. unüblich. und DOM ist kein Quatsch :)

Wie auch immer, es gibt Scripte, die das vereinfachen, allerdings mit einer eigenen Syntax (HTML in DOM-Befehle umzuwandeln wäre aus den genannten Gründen Unsinn):

http://die.netzspielwiese.de/blog/javascript-dom/2006-04/dom-builder-dom-elemente-einfacher-erstellen
http://svn.danwebb.net/external/DomBuilder/trunk/dombuilder.js

In jQuery kann man z.B. schreiben:
$("<div><p>Hello</p></div>").appendTo("body");
http://docs.jquery.com/Core/jQuery#htmlownerDocument
Intern wird aber vermutlich auch innerHTML verwendet. Die Notwendigkeit einer separaten Syntax sah dort niemand ein.

Mathias

Danke für die Links. JQuery scheint mir hier recht brauchbar zu sein, ich werds mal testen. Es beisst sich hoff. nicht mit prototype.. !?

schönen Sonntag noch

[molily]

JQuery scheint mir hier recht brauchbar zu sein, ich werds mal testen. Es beisst sich hoff. nicht mit prototype.. !?

Urgs. Also jQuery und Prototype sind riesige Rundum-Sorglos-Frameworks, von denen man üblicherweise nur ein Zehntel braucht. Die sollte man möglichst nicht gleichzeitig einsetzen.

Mathias

[Permafrost]

JQuery scheint mir hier recht brauchbar zu sein, ich werds mal testen. Es beisst sich hoff. nicht mit prototype.. !?

Urgs. Also jQuery und Prototype sind riesige Rundum-Sorglos-Frameworks, von denen man üblicherweise nur ein Zehntel braucht. Die sollte man möglichst nicht gleichzeitig einsetzen.

auch wieder wahr :-/ dann heisst es eben schlau lesen und auf eins von beiden eher verzichten

[Struppi]

Hätte aber nicht gedacht daß DOM so ungeheuer aufwändig ist. 5 Zeilen HTML entsprechen da locker 120 Zeilen JS :-/

Das glaub ich nicht. Du musst dir natürlich helper Funktionen bauen, die immer wiederkehrende Aufgaben vereinfachen. Aber 5 Zeilen HTML brauchst du keine 120 JS.

Struppi.

[Permafrost]

Das glaub ich nicht. Du musst dir natürlich helper Funktionen bauen, die immer wiederkehrende Aufgaben vereinfachen. Aber 5 Zeilen HTML brauchst du keine 120 JS.

Helperfunktion! gutes Stichwort. gibts ein JS- oder sonstiges Framework was sowas bietet? Es gibt da so einen 'DOMAssistant' http://www.domassistant.com/ ich hab den nur flüchtig überflogen, glaube aber nicht daß es das bietet was ich brauche.

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

<p>  
<div class="zitat_foot" id="" >Zugefügt am 30.10.2008 | 0 Kommentare | <a href="">Kommentar schreiben</a></div>  
    <form name="comment" target="" class="commentform">  
     <div class="commentform">Ihr Name: <input id="comment_name" type="text" name="name"> Ihre Emailadresse: <input id="comment_email" type="text" name="email"></div>  
     <input type="hidden" value="id">  
     <div class="commentform">Ihr Kommentar zu diesem Zitat. HTML <b>nicht</b> erlaubt, auch keine Links: </div>  
     <div><textarea cols="70" rows="5" id="comment_text" name="comment"></textarea></div>  
     <div><input type="submit" name="Kommentar senden">&nbsp;&nbsp;<span id="display" style="align:right; ">sdfasdf</span></div>  
    </form>  
</div></p>

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

  
  spaceoben = document.createElement('p');  
  
  var kommentarknoten = document.createElement('form');  
  kommentarknoten.setAttribute('name','kommment');  
  kommentarknoten.setAttribute('class','commentform');  
  
  var k1 = document.createElement('div');  
  k1.setAttribute('class','commentform');  
  
  k1_t1 = document.createTextNode("Ihr Name: ");  
  k1_input1= document.createElement('input');  
  k1_input1.setAttribute('id','comment_name');  
  k1_input1.setAttribute('type','text');  
  k1_input1.setAttribute('name','name');  
  
  k1_t2 = document.createTextNode("Ihre Email: ");  
  k1_input2= document.createElement('input');  
  k1_input2.setAttribute('id','comment_email');  
  k1_input2.setAttribute('type','text');  
  k1_input2.setAttribute('name','email');  
  
  k1.appendChild(k1_t1);  
  k1.appendChild(k1_input1);  
  k1.appendChild(k1_t2);  
  k1.appendChild(k1_input2);  
  
  var k2 = document.createElement('div');  
  k2.setAttribute('class','commentform');  
  k2_t1 = document.createTextNode("Ihr Kommentar zu diesem Zitat. HTML nicht erlaubt, auch keine Links:");  
  k2.appendChild(k2_t1);  
  
  var k3 = document.createElement('div');  
  k3_txt = document.createElement('textarea');  
  k3_txt.setAttribute('cols','70');  
  k3_txt.setAttribute('rows','5');  
  k3_txt.setAttribute('maxlength','45');  
  k3_txt.setAttribute('id','comment_text');  
  k3_txt.setAttribute('name','comment');  
  
  k3.appendChild(k3_txt);  
  
  var k4 = document.createElement('div');  
  var k4_submit = document.createElement('input');  
  k4_submit.setAttribute('type','submit');  
  k4_submit.setAttribute('name','Senden');  
  k4.appendChild(k4_submit);  
  
  kommentarknoten.appendChild(k1);  
  kommentarknoten.appendChild(k2);  
  kommentarknoten.appendChild(k3);  
  kommentarknoten.appendChild(k4);  
  
  spaceoben.appendChild(kommentarknoten);

[molily]

ok 120 Zeilen war übertrieben aber dennoch... kann ja mal ne Kostprobe geben. dieser HTMl Code:
Ergibt - mehr oder weniger - diesen DOM Code (nicht auf Feinheiten achten es geht hier nur um die Größenverhältnisse)

Ja, schön.
Aber wieso sollte man an irgendeiner Stelle eine solche »Umwandlung« vornehmen?

Mathias

[Permafrost]

Aber wieso sollte man an irgendeiner Stelle eine solche »Umwandlung« vornehmen?

naja um das Coding ratpide zu vereinfachen

[Kai345]

[latex]Mae  govannen![/latex]

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

[...]

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

[...]

Ja, das hat mich auch immer gestört. Deshalb habe ich mir einfach eine Funktion geschrieben, die mir die Arbeit etwas abnimmt. Ich definiere das HTML in einer verschachtelten Objekt-Literal-Schreibweise[1] und die ganze Verschachtelei etc. macht dann die Funktion für mich. Leider habe ich diese funktion vor längerer Zeit geschrieben und schon ewig nichts mehr daran gemacht (sie läßt bisher einige Sonderfälle aus (IE und input z.B.) , hat eine zu komplizierte Syntax und ist leider aufgrund meines damals noch sehr beschränkten Kenntnis-Standes in Javascript weder schön, effektiv noch schnell, weshalb ich sie an dieser Stelle auch nicht anpreisen will. Aber wie das so ist: Sie funktioniert halbwegs (mit diversen Sonderfall-Einschränkungen, die ich bisher halt auf altgediente Art erzeuge) und man hat irgendwie immer was besseres zu tun ... :(

Was ich sagen will: Mach dir Gedanken, _was_ du immer wieder _wie_ machen musst, um bestimmte Elemente zu erzeugen und zu verschachteln, überlege dir eine schöne Struktur, wie du es definierst, dann kannst du durchaus selber eine kleine Helferfunktion schreiben, die dir zumindest einen Teil der Arbeit abnimmt.

Cü,

Kai

[1] Zum Beispiel erzeugt das hier:

  
var el = {  
  element: "div",  
  child: [  
  {  
    element: a,  
    href="#"  
    child: "X"  
  },  
  {  
    text: "foobar"  
  },  
  {  
    element: a,  
    href: "/",  
    child: "Y"  
  }]  
};

mit meiner Funktion den Code

  
<div>  
  <a href="#">X</a>  
  foobar  
  <a href="/">Y</a>  
</div>  

Bei dieser Codemenge lohnt es sich natürlich noch nicht, aber das Prinzip sollte klar werden.

[molily]

<div>
  <a href="#">X</a>
  foobar
  <a href="/">Y</a>
</div>

>   
> Bei dieser Codemenge lohnt es sich natürlich noch nicht, aber das Prinzip sollte klar werden.  
  
Bei größeren Codemengen schon gar nicht! Sagt mir mal jemand, warum man HTML-Code in solchen (immer umständlichen!) Strukturen unterbringen sollte, und nicht in HTML, den ich dann einfach mit innerHTML ins Dokument einfügen kann?  
  
Anders gefragt: Wann besteht denn überhaupt die Notwendigkeit, riesige HTML-Mengen im Script zu \*erzeugen\*? Ich finde, diese Diskussion um Helferfunktionen hat sich von konkreten Problemfällen entfernt. Ich bin noch nie in die Situation gekommen, größere HTML-Mengen mit dem DOM generieren zu wollen.  
  
HTML ist üblicherweise bereits im Dokument, ausgeblendet oder als Vorlage. In ersten Fall blende ich es ein, in anderen Fall klone ich es (ggf. mehrfach) und fülle die Vorlage mit Daten aus. Muss ich z.B. hunderte Tabellenzeilen mit JS generieren (etwa auf Basis von JSON-Daten), nehme ich sowas wie [Prototype-Templates](http://) oder klone und befülle die Zellen, indem ich sie über Selektoren anspreche. Alles kein Problem ganz ohne Low-Level- oder vereinfachtes DOM-Gefummel.  
  
Sicher kann ich dafür auch sowas wie Prototypes DOMBuilder verwenden, das ist eher eine Stil- und Geschmacksfrage - der Aufwand bleibt ungefähr gleich, weil die zu generierende Codemenge nie signifikant groß wird!  
  
Ist das HTML(-Gerüst) nicht im Dokument, lade ich das ganze als HTML vom Server nach und kann es mit innerHTML direkt einspeisen bzw. die XML- oder JSON-Daten auf die besagte Weise transformieren.  
  
Die Frage ist vielmehr, welche Vorteile mir das Zusammenbauen via DOM bringt. Eigentlich wenige, nämlich nur das direkte Registrieren von Event-Handlern bei allen beteiligten Elementen. Mit innerHTML und Co. muss ich Elemente nach dem Einhängen per Selektor ansprechen und ihnen Handler verpassen.  
  
Aber selbst das hat mir nie Aufwand oder Probleme bereitet. jQuery hat z.B. beim Klonen die Möglichkeit, auch alle Event-Handler mit zu kopieren. Wenn man die Handler dann auf den Kontext reagieren lässt bzw. gleich Event Delegation betreibt (also ein Handler bei einem übergeordneten Element alle Events verarbeiten lässt), muss man bei Unterelementen gar keine spezifischen Handler registrieren.  
  
Mathias

-- 
[JavaScript-Erweiterung für das SELFHTML-Forum](http://forum.de.selfhtml.org/js/doku/)

[Kai345]

[latex]Mae  govannen![/latex]

Bei größeren Codemengen schon gar nicht! Sagt mir mal jemand, warum man HTML-Code in solchen (immer umständlichen!) Strukturen unterbringen sollte, und nicht in HTML, den ich dann einfach mit innerHTML ins Dokument einfügen kann?

Weil innerHTML Mist ist, wenn man Code mit mehreren dynamischen Bestandteilen erzeugen will. Man bastelt sich da eine irgendwann völlig unübersichtliche Codewüste aus verketteten Strings und "escaped"-en Zeichenkettenbegrenzern zusammen, die man irgendwann nicht mehr überschaut, spätestens, wenn man nachträglich noch etwas einfügen/ändern will. Warum sind denn hier im Forum immer wieder Anfragen, die im Endeffekt durch ein vergessenen Zeichenketten-Begrenzer oder fehlende Maskierung verursacht wurden?

Anders gefragt: Wann besteht denn überhaupt die Notwendigkeit, riesige HTML-Mengen im Script zu *erzeugen*? Ich finde, diese Diskussion um Helferfunktionen hat sich von konkreten Problemfällen entfernt. Ich bin noch nie in die Situation gekommen, größere HTML-Mengen mit dem DOM generieren zu wollen.

HTML ist üblicherweise bereits im Dokument, ausgeblendet oder als Vorlage. In ersten Fall blende ich es ein, in anderen Fall

Das käme nur dann in Frage, wenn die Seite ohnehin *zwingend* auf Javascript angewiesen ist, z.B. für ein Spiel oder eine Art "Applikation" ansonsten hat ausgeblendetes HTML nichts im Dokument verloren (wegen Clients ohne Javascript und CSS, die dann ggf. mit toten Links ).

klone ich es (ggf. mehrfach) und fülle die Vorlage mit Daten aus. Muss ich z.B. hunderte Tabellenzeilen mit JS generieren (etwa auf Basis von JSON-Daten), nehme ich sowas wie Prototype-Templates oder klone und befülle die Zellen, indem ich sie über Selektoren anspreche. Alles kein Problem ganz ohne Low-Level- oder vereinfachtes DOM-Gefummel.

http:// gefällt mir sehr gut - der Rest der URL wäre allerdings hier wesentlich interessanter ;)

Du nimmst dann sowas wie "Prototype-Templates". Hmm, was soll das sein? Die Suchmaschine schmeißt mir bei den ersten Links nur Beispiele zu prototype.js aus. Und das würde ich eigentlich für einen schlechten Scherz halten, überdimensionierte und tw. schlechte Frameworks wie prototype.js, jquery und wie sie alle heißen, als Alternative zu einer kleinen Helferfunktion heranzuziehen. Ansonsten benötige ich einen Link. Da du weiter unten in deinem Beitag jquery erwähnt hast, fürchte ich allerdings das Schlimmste (*g*)

Cü,

Kai

[molily]

Weil innerHTML Mist ist, wenn man Code mit mehreren dynamischen Bestandteilen erzeugen will. Man bastelt sich da eine irgendwann völlig unübersichtliche Codewüste aus verketteten Strings und "escaped"-en Zeichenkettenbegrenzern zusammen

Ja, wenn man es schlecht macht. Unübersichtliche Codewüsten kann ich mit innerHTML *oder* DOM machen. Ich halte den Code, den Struppi und du hier beispielhaft gepostet haben, für alles andere als übersichtlich.

Warum sind denn hier im Forum immer wieder Anfragen, die im Endeffekt durch ein vergessenen Zeichenketten-Begrenzer oder fehlende Maskierung verursacht wurden?

Weil Leute massig HTML in JavaScript in einer Weise unterbringen, wie es da überhaupt nicht benötigt wird und nicht hingehört.

Und das würde ich eigentlich für einen schlechten Scherz halten, überdimensionierte und tw. schlechte Frameworks wie prototype.js, jquery und wie sie alle heißen, als Alternative zu einer kleinen Helferfunktion heranzuziehen.

Ach Kai, versuchs doch mal mit Argumenten statt polemischen Rundumschlägen.

Der Link ist http://www.prototypejs.org/api/template und es geht nicht um deine Vorurteile hinsichtlich Frameworks, sondern um dieses Konzept, dass erstmal mit Prototype nichts zu tun hat; man braucht auch sicher nicht Prototype, um dieses Konzept einzusetzen, und es ist auch nicht kompliziert, solche Funktionalität mit separaten Helferfunktionen umzusetzen.

Mathias

[Kai345]

[latex]Mae  govannen![/latex]

Weil innerHTML Mist ist, wenn man Code mit mehreren dynamischen Bestandteilen erzeugen will. Man bastelt sich da eine irgendwann völlig unübersichtliche Codewüste aus verketteten Strings und "escaped"-en Zeichenkettenbegrenzern zusammen

Ja, wenn man es schlecht macht. Unübersichtliche Codewüsten kann ich mit innerHTML *oder* DOM machen.

Natürlich. Nur ist es meist aufwendiger, mit innerHTML keine Codewüste zu erzeugen als umgekehrt.

Ich halte den Code, den Struppi und du hier beispielhaft gepostet haben, für alles andere als übersichtlich.

Generell mag ich Objekt-Literale sehr, weil sie -für mich, zumindest bis zu einer gewissen Ebene- gut lesbar, klar strukturiert und übersichtlich sind und weil man auf einen Blick alle Daten erfassen kann. Aber das ist eine Frage der persönlichen Vorlieben und auch das kann man natürlich komplizieren bis zur Unlesbarkeit. So halte ich die von mir verwendete Notation durchaus nicht für die Beste, die Struktur jedoch ist eben eine, mit dem ich persönlich gut zurechtkomme.

Warum sind denn hier im Forum immer wieder Anfragen, die im Endeffekt durch ein vergessenen Zeichenketten-Begrenzer oder fehlende Maskierung verursacht wurden?

Weil Leute massig HTML in JavaScript in einer Weise unterbringen, wie es da überhaupt nicht benötigt wird und nicht hingehört.

Das mag sicherlich oft so sein, aber ob es dort benötigt wird oder hingehört oder auch nicht hat auf die anzuwendende Syntax ja keinen Einfluss. Womit wir wieder bei {siehe oben} wären.

Und das würde ich eigentlich für einen schlechten Scherz halten, überdimensionierte und tw. schlechte Frameworks wie prototype.js, jquery und wie sie alle heißen, als Alternative zu einer kleinen Helferfunktion heranzuziehen.

Ach Kai, versuchs doch mal mit Argumenten statt polemischen Rundumschlägen.

Nö, polemische Rundumschläge gegen Frameworks sind immer berechtigt *g*.

Nein, mir ging es darum, daß ich leider eine Entwicklung sehe, in der mehr oder weniger riesige Frameworks eingesetzt werden, nur um z.B. eine popelige Sliderfunktion an ein oder zwei Stellen der Seite einzubinden. Gleiches würde gelten, wenn man ein Framework dazu nutzt, nur um dynamisch etwas Code zu erzeugen. Es ging dabei nicht nur um den oben gequoteten Satz, sondern auch um

| Sicher kann ich dafür auch sowas wie Prototypes DOMBuilder verwenden, das ist eher eine Stil- und Geschmacksfrage - der Aufwand bleibt ungefähr gleich, weil die zu generierende Codemenge nie signifikant groß wird!

... was ein "Javascript-ungebildeter" Mitleser *in Verbindung* durchaus als Empfehlung verstehen könnte, dafür dafür ein Framework zu besorgen und einzubinden.

Der Link ist http://www.prototypejs.org/api/template und es geht nicht um deine Vorurteile hinsichtlich Frameworks, sondern um dieses Konzept, dass erstmal mit Prototype nichts zu tun hat; man braucht auch sicher nicht Prototype, um dieses Konzept einzusetzen, und es ist auch nicht kompliziert, solche Funktionalität mit separaten Helferfunktionen umzusetzen.

Also ein ganz gewöhnliches Template-System, wie ich es von z.B. PHP schon kenne. Wäre es als solches bezeichnet worden (und wenn ich den Link gehabt hätte bzw bei den google.links nicht beim ersten Auftreten von $('irgendwas') geistig weggeschaltet hätte), hätte ich das sofort verstanden, der Begriff 'Prototype-Template' ließ jedoch eher auf eine sehr Framework-spezifische Lösung schließen.

Und ja, ich mag Frameworks nicht sonderlich, würde hier aber zu weit führen; darüber wurde in einschlägigen Javascript-Gruppen in sehr vielen Threads mit mehreren hundert Beiträgen  bis zum Erbrechen diskutiert

Cü,

Kai

[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.

[ChrisB]

Hi,

an der betreffenden Stelle habe ich zB. ein <div id='01'>

Abgesehen von der wie gesagt ungueltigen ID -

nun versuch ich mit

$("zitat_id").appendChild(kommentarknoten);

wobei ich , klar, dafür gesorgt habe daß zitat_id hier den richtigen Wert hat

-was meinst du mit letzterem - dass du eine Variable namens zitat_id mit der ID des gesuchten Elementes hast?

Dann solltest du auch diese Variable als Funktionsparameter uebergeben - und nicht das Textliteral "zitat_id".

MfG ChrisB