Elementknoten gegen Textknoten austauschen - wie?

[Gina]

Hallo zusammen,

wieder einmal melde ich mich mit einem Problem zu später Stunde.

Ich habe einen Elementknoten:
    nodeToReplace=document.getElementById("Inhalt").firstChild.nextSibling; (=<a href="./home.html">Inhalt</a>)

Diesen Knoten möchte ich durch einen ganz einfachen Text ersetzen. Habe hierzu einen Textknoten erstellt:
    neuerTextKnoten=document.createTextNode("irgendwas");

Laut SELFHTML Javascript Dokumentation sollte es nun ja möglich sein, über nodeValue den Elementknoten gegen einen beliebigen anderen Knoten auszutauschen.

Also: nodeToReplace.nodeValue=neuerTextKnoten;

Das Ganze funktioniert so jedoch nicht. Nach Beenden der Funktion, in der das passiert, steht im HTML Dokument immer noch der Link (s.o. Inhalt von nodeToReplace). Bin ich da wieder mal übers DOM gestolpert oder funktioniert so was wirklich nur mit innerHTML (was meines Wissens ja nicht W3C konform ist).

Ich habe es auch schon mit replaceChild versucht, aber dabei wird logischerweise nur der Linktext ausgetauscht, das Element ist ansonsten immer noch ein Link, was nicht sein soll. Auch auf den parentNode auszuweichen und von dort aus mit replaceChild zu arbeiten fällt flach, da (kann man ja am nextSibling erkennen) vor dem Link noch anderes Zeug steht, das erhalten bleiben soll.

Ich brauche also mal wieder (leider) Eure Hilfe. Dachte eigentlich, ich könnte mit dem Firebug da durchsteppen, aber der hängt sich ein paar Zeilen vorher aus Gründen, die ich nicht kenne, grauenhaft auf.

Danke und Gruss
Gina

[ChrisB]

Hi,

Laut SELFHTML Javascript Dokumentation sollte es nun ja möglich sein, über nodeValue den Elementknoten gegen einen beliebigen anderen Knoten auszutauschen.

Nein, das nicht.
Das mag für Text- und Attribute-Nodes funktionieren, aber nicht für Elemente.

Ich habe es auch schon mit replaceChild versucht, aber dabei wird logischerweise nur der Linktext ausgetauscht, das Element ist ansonsten immer noch ein Link, was nicht sein soll.

Dann hast du dich auf das falsche Kind bezogen.

Auch auf den parentNode auszuweichen und von dort aus mit replaceChild zu arbeiten fällt flach, da (kann man ja am nextSibling erkennen) vor dem Link noch anderes Zeug steht, das erhalten bleiben soll.

Fällt überhaupt nicht flach, weil du das Kind, das ersetzt werden soll, als Parameter an die Methode übergibst.

MfG ChrisB

[Gina]

Hallo Chris

Ich habe es auch schon mit replaceChild versucht, aber dabei wird logischerweise nur der Linktext ausgetauscht, das Element ist ansonsten immer noch ein Link, was nicht sein soll.

Dann hast du dich auf das falsche Kind bezogen.

Auch auf den parentNode auszuweichen und von dort aus mit replaceChild zu arbeiten fällt flach, da (kann man ja am nextSibling erkennen) vor dem Link noch anderes Zeug steht, das erhalten bleiben soll.

Fällt überhaupt nicht flach, weil du das Kind, das ersetzt werden soll, als Parameter an die Methode übergibst.

hey, ich glaub, jetzt ist der Groschen bei mir gefallen. Danke. Wenn ich Euch nicht hätte!

Danke u. liebe Grüsse
Gina

[Felix Riesterer]

Liebe Gina,

nodeToReplace=document.getElementById("Inhalt").firstChild.nextSibling; (=<a href="./home.html">Inhalt</a>)
    neuerTextKnoten=document.createTextNode("irgendwas");

Laut SELFHTML Javascript Dokumentation sollte es nun ja möglich sein, über nodeValue den Elementknoten gegen einen beliebigen anderen Knoten auszutauschen.

Also: nodeToReplace.nodeValue=neuerTextKnoten;

Wenn Du den _Text_ eines Textknotens gegen einen anderen _Text_ austauschen möchtest, dann kannst Du mit nodeValue daherkommen. Dann reden wir davon, dass Du den textuellen Knoteninhalt gegen einen neuen textuellen Inhalt ersetzt - aber nicht so wie oben. Dort müsste es eigentlich heißen:

nodeToReplace.nodeValue=neuerTextKnoten.nodeValue;
oder viel einfacher
nodeToReplace.nodeValue="irgendwas";

Wenn Du als Knoteninhalt aber eine Kindknoten-Struktur hast, dann reden wir nicht über nodeValue, da nodeValue nur dann einen Wert hat, wenn es sich um einen Textknoten (oder Attributknoten) handelt. Siehe dazu die Dokumentation: http://de.selfhtml.org/javascript/objekte/node.htm#node_value@title=nodeValue.

Was Du wirklich möchtest, ist einen vorhandenen Knoten durch einen anderen (neuen) Knoten ersetzen. Dazu hast Du ja Deine zwei Knoten. Nun brauchst Du nur noch node.[ref:self812;javascript/objekte/node.htm#replace_child@title=replaceChild()] und schon kannst Du loslegen.

Liebe Grüße,

Felix Riesterer.

[Gina]

Hallo Felix,

Wenn Du als Knoteninhalt aber eine Kindknoten-Struktur hast, dann reden wir nicht über nodeValue, da nodeValue nur dann einen Wert hat, wenn es sich um einen Textknoten (oder Attributknoten) handelt. Siehe dazu die Dokumentation: http://de.selfhtml.org/javascript/objekte/node.htm#node_value@title=nodeValue.

OK, das habe ich dann wohl falsch verstanden. Aber worin unterscheidet sich dann node.nodeValue von node.data? Lediglich darin, dass ich mit nodeValue auch Attributknoten behandeln kann?

Was Du wirklich möchtest, ist einen vorhandenen Knoten durch einen anderen (neuen) Knoten ersetzen. Dazu hast Du ja Deine zwei Knoten. Nun brauchst Du nur noch node.[ref:self812;javascript/objekte/node.htm#replace_child@title=replaceChild()] und schon kannst Du loslegen.

Das habe ich, wie eingangs geschrieben, ja schon versucht. Aber da habe ich offenbar den falschen Knoten übergeben. Chris hat mir da, glaube ich, den entscheidenden Hinweis gegeben.

Liebe Grüsse
Gina

[Gunnar Bittersmann]

@@Gina:

nuqneH

wieder einmal melde ich mich mit einem Problem zu später Stunde.

Oder früher. ,-O

Ich habe einen Elementknoten:
    nodeToReplace=document.getElementById("Inhalt").firstChild.nextSibling; (=<a href="./home.html">Inhalt</a>)

Diesen Knoten möchte ich durch einen ganz einfachen Text ersetzen.

Einfacher wäre es evtl., das 'a'-Element im DOM zu belassen und lediglich dessen @href zu entfernen:
document.getElementById("Inhalt").firstChild.nextSibling.href = null;

Im Stylesheet sollten Regeln dann freilich nicht für alle 'a', sondern nur für Links 'a[href]' angegeben sein; und da IrgendEin alter Kumpane keine Attributselektoren versteht, dies per 'a:link, a:visited'.

Qapla'

[Gina]

Hallo Gunnar,

Einfacher wäre es evtl., das 'a'-Element im DOM zu belassen und lediglich dessen @href zu entfernen:
document.getElementById("Inhalt").firstChild.nextSibling.href = null;

habs schon gepostet: es funktioniert. Felix und Chris haben mir dabei auf die Sprünge geholfen.

Einzig unser aller Freund, der IE(8 in diesem spez. Fall) versteht den Code offenbar nur teilweise, der lässt den Link stehen und schreibt den neuen dahinter. Das werd ich ihm aber noch irgendwann austreiben.

Gruss
Gina

PS: hast Du neulich mein tolles  Zeugma gesehen?

[Gunnar Bittersmann]

@@Gina:

nuqneH

Einzig unser aller Freund, der IE(8 in diesem spez. Fall) versteht den Code offenbar nur teilweise, der lässt den Link stehen und schreibt den neuen dahinter. Das werd ich ihm aber noch irgendwann austreiben.

In einfachsten Fall schickst du ihn in den 7er Modus.

PS: hast Du neulich mein tolles  Zeugma gesehen?

Nö, das war mir doch glatt entgangen.

Qapla'

[ChrisB]

Hi,

Einzig unser aller Freund, der IE(8 in diesem spez. Fall) versteht den Code offenbar nur teilweise, der lässt den Link stehen und schreibt den neuen dahinter.

Dann hast du vermutlich nicht den richtigen Knoten zum ersetzen ausgewählt.

var myNodeToReplace=myFootCenter.firstChild.nextSibling.nextSibling.nextSibling;

Sich derart im DOM an den Knoten entlang zu hangeln, kann leicht problematisch werden, wenn ein Browser vom Standard abweichender Ansicht darüber ist, ob Whitespace zwischen Elementen auch Knoten darstellt, oder nicht. (Der IE war, zumindest in früheren Versionen, der falschen Ansicht, dem wäre nicht so.)

Wenn du ein A-Element suchst, dann ist bspw. sowas oft verlässlicher:
var myNodeToReplace = myFootCenter.getElementsByTagName("a")[xy];

MfG ChrisB

[Gina]

Hallo Chris,

var myNodeToReplace=myFootCenter.firstChild.nextSibling.nextSibling.nextSibling;

Sich derart im DOM an den Knoten entlang zu hangeln, kann leicht problematisch werden, wenn ein Browser vom Standard abweichender Ansicht darüber ist, ob Whitespace zwischen Elementen auch Knoten darstellt, oder nicht. (Der IE war, zumindest in früheren Versionen, der falschen Ansicht, dem wäre nicht so.)

Du hast vollkommen recht. Dies war natürlich auch nur die erste Annäherung. Die anderen Browser (Safari, FF und iCab) stellen vor dem A-Element einen Whitespace dar, der IE nicht. Aber das bekomm ich gut in den Griff, z.B. mit dem von Dir vorgeschlagenen Code:

var myNodeToReplace = myFootCenter.getElementsByTagName("a")[xy];

Ich bin froh, dass ich nun schon mal das Prinzip der Knotenersetzung begriffen habe.

Gruss
Gina

[Gina]

Hallo zusammen,

wieder einmal melde ich mich mit einem Problem zu später Stunde.

Und es funzt!

	var myFootCenter=document.getElementById("foot-center");  
	var myNodeToReplace=myFootCenter.firstChild.nextSibling.nextSibling.nextSibling;  
	var myTextNode=document.createTextNode("Klicke auf einen der Wochentage");  
  
	myFootCenter.firstChild.data="Entdecke diese Welt";  
	myFootCenter.replaceChild(myTextNode,myNodeToReplace);  

Gruss
Gina