yast another dom unverstäandniss - wieso hat das kind keinen inhalt?

so funzt das:

var div_text = document.createTextNode ( "A" );
	var span_text = document.createTextNode ( "a" );
	elem.insertBefore(div_text, elem.firstChild);
	elem.firstChild.nextSibling.appendChild(span_text);

jetzt muss man die knoten wieder löschen können. da werd ich auch noch meine freude mit haben. iwie ganz schön umständlich dieses dom zeugs naja.

Shade Of Mine

yadu schrieb:

iwie ganz schön umständlich dieses dom zeugs naja.

deshalb verwendet es ja auch niemand. Gerade das einfügen und löschen ist kompliziert.

idR macht man es dann so, dass man komplette bäume einhängt und aushängt. Und nicht so klein klein rum bastelt.

das klein rumbasteln muss sein. das wird nämlich mal ein spiel, wenns fertig ist.
da muss man dann buchstaben einfügen und wieder löschen können.

Shade Of Mine

yadu schrieb:

das klein rumbasteln muss sein. das wird nämlich mal ein spiel, wenns fertig ist.
da muss man dann buchstaben einfügen und wieder löschen können.

mit jQuery und konsorten hast du sowas in 5 Minuten fertig gebaut

Bedenke auch, dass jedes ändern des DOM Trees den Browser dazu zwingt den kompletten DOM Tree neu zu layouten. Du solltest also so wenig Änderungen wie möglich machen. Wie gesagt: normalerweise arbeitet man deshalb mit kompletten Subtrees.

Oft ist auch innerHTML viel besser - ist viel einfacher und schneller als einen ganzen DOM Subtree aufzubauen.

zB wenn wir ein Wort haben und wenn ich a Drücke verschwinden alle As aus dem Wort, würde man das so bauen, dass das Wort bei einem Druck auf a komplett aus dem DOM Tree ausgehängt wird und komplett neu erstellt wird. Vermutlich würde ich das dann sogar über innerHTML machen.

in 5 minuten, mag sein, wenn man sich erstmal auskennt. das benötigt aber auch eine gewisse einarbeitungszeit.
mit innerHTML hab ich es auch schon versucht. nicht weil ich wusste, das es effektiver ist, sondern weil es mir einfacher erschien, aber das hat iwie nicht gefunzt. das ganze enthält nämlich noch diverse css klassen, die ich hier zwecks vereinfachung weggelasen habe. vllt. sollte ich es dennoch noch einmal mit innerHTML versuchen.

das soll eine art scrabble spiel werden.
die tabelle ist 15*15 zellen groß und jede zelle hat den gleichen aufbau

<td><div>A<span>a</span></div></td>

meist wird dann die komplette div sequenz ausgetauchst werden also
dann steht da

<td><div>B<span>b</span></div></td>

oder

<td><div>X<span>x</span></div></td>

usw.
du meinst, es wäre effektiver, die komplette div sequenz separat zu generieren und dann mit innerHTML ans td element dran zu hängen? das erschien mir instinktiv eher nicht so, aber naja, ich hab auch keinen plan wie das intern gerendert wird uns so...
für tipps wie man sowas besser machen kann ( kein jquery :)) hab ich große offene ohren.

SideWinder

Du gehst überhaupt nicht auf DIE Empfehlung hier ein. Was spricht gegen den Einsatz von jQuery?

MfG SideWinder

SideWinder schrieb:

Du gehst überhaupt nicht auf DIE Empfehlung hier ein. Was spricht gegen den Einsatz von jQuery?

MfG SideWinder

doch, da bin ich schon mehrmals drauf eingegangen. dagegen spricht die einarbeitungszeit. ich habe damit noch nie was gemacht.
jetzt, wo ich mein ziel erreicht habe, wozu noch jquery?

Shade Of Mine

yadu schrieb:

in 5 minuten, mag sein, wenn man sich erstmal auskennt. das benötigt aber auch eine gewisse einarbeitungszeit.

Ja, etwa 10 Minuten. Es ist trvial.

für tipps wie man sowas besser machen kann ( kein jquery :)) hab ich große offene ohren.

Gib jeder td eine ID. zB Y_X also 0_0 für das erste Elemente, 0_1 für das 2. etc.
Dann kannst du ganz trivial über
document.getElementById(x+'_'+y).innerHTML = '<div>X<span>x</span></div>';
den Inhalt setzen.

Über jQuery wäre es zB trivial zu dem Element über .data() noch zusätliche Infos zu setzen. So dass zB $('#'+x+'_'+y).data('key') dann in diesem Fall zB x wäre.

mit innerHTML habe ich es noch einmal versucht. damit geht komplett die css formatierung flöten.
bleibt wohl doch nur die node hangelei.

Shade Of Mine

CSS funktioniert definitiv auch mit innerHTML. Kann aber natürlich ein paar quirkse geben. innerHTML ist da nicht immer perfekt.

Was übrigens ein weitrer Grund für jQuery wäre

Wenn es ohne innerHTML gehen soll, würde ich aber den DOM Tree so aufbauen:

var outer=document.createElement("div");
  var inner=document.createElement("span");

  var text1=document.createTextNode("X");
  var text2=document.createTextNode("x");

  inner.appendChild(text2);

  outer.appendChild(text1);
  outer.appendChild(inner);

  var wrapper = document.createElement("td");
  wrapper.appendChild(outer);
  wrapper.setAttribute("id", "1_1");

  var elem = document.getElementById("1_1"); //das td element
  elem.parentNode.replaceNode(wrapper, elem);

bzw. würde ich statt td ein leeres span aufziehen und das immer austauschen damit im td so sachen wie id usw ohne probleme erhalten bleiben können.

Aber wie gesagt, das ist furchtbar kompliziert und anstrengend. geht alles viel viel viel einfacher.

Wenn du es aber so machst, ist es wichtig nur an wenigen zentralen Stellen den DOM Tree anzufassen. In meinem Beispiel mache ich das nur in der letzten Zeile. Dies bewirkt ein reflow des Dokuments. Die interessanten Stichwörter hier sind reflow und repaint. Beides will man minimieren aber reflows sind oft versteckt.

Siehe zB: http://dev.opera.com/articles/view/efficient-javascript/?page=3