mit nodeValue oder data HTML einfügen?

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

26.06.2005 - 23:57

Bisher hab ich das immer mit innerHTML gelöst, jedoch ist diese Eigenschaft nicht w3c konform und "out of date".

Wenn man aber mit document.getElementById('xx').firstChild.nodeValue bzw. document.getElementById('xx').firstChild.data einen fett gedruckten Text einfügen will (zb "<b>Hallo!</b>"), dann schreibt er Hallo nicht fettgedruckt hin, sondern er schreibt "<b>Hallo!</b>" hin. Gibt es eine Möglichkeit, dass zu machen?

Bearbeitet von tomstig am 28.06.2005, 08:22

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

27.06.2005 - 02:33

klar, dazu muss man nur das DOM-Node System verstanden haben.

Und eigentlich sagts der Name eh auch schon: "data" - das sind reine (unparsed) Strings, die kommen genau so auf den bildschirm wie man sie reinschreibt.

Willst du jetzt einen fetten text, so musst du ein umschliessendes "B" Element generieren:

Code: PHP

bold  = document.createElement('b');
text1 = document.createTextNode('Hallo');
bold.appendChild(text1);
document.getElementById('xx').appendChild(bold);

ich hoffe da is jetz kein Fehler drin

alles nachzulesen unter
http://de.selfhtml.org/javascript/objekte/index.htm

that

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

27.06.2005 - 08:57

Zitat von tomstig
Bisher hab ich das immer mit innerHTML gelöst, jedoch ist diese Eigenschaft nicht w3c konform und "out of date".

Das ist zwar nicht W3C konform aber absolut nicht "out of date", da es alle "gängigen" Browser beherrschen, und es weit einfacher und meistens schneller ist als der DOM-Ansatz.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

27.06.2005 - 16:16

Zitat von that
Das ist zwar nicht W3C konform aber absolut nicht "out of date", da es alle "gängigen" Browser beherrschen, und es weit einfacher und meistens schneller ist als der DOM-Ansatz.

Man hat einfach viel mehr Möglichkeiten mit Nodes.

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

27.06.2005 - 19:25

Zitat von watchout
Man hat einfach viel mehr Möglichkeiten mit Nodes.

An dieser Stelle wäre ein Beispiel interessant, wo du etwas mit nodes machst, was mit innerHTML nicht möglich ist

BTW: Bei meinem Problem, wegen dem ich frage, will ich eigentlich statt einem <input> ein

Code:

<div style="width: 20px; height: 20px; border: 1px solid #000">

einfügen und umgekehrt.

Beispiel gibt es hier: http://tomstig.to.funpic.de/umfrage/add_question.php
Wenn man bei den radios auf Bild klickt, soll das <div> erscheinen und bei Text das input...

Bearbeitet von tomstig am 27.06.2005, 19:30

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

27.06.2005 - 23:26

Hab das ganze mit "display: none" gelöst.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

28.06.2005 - 03:42

Zitat von tomstig
An dieser Stelle wäre ein Beispiel interessant, wo du etwas mit nodes machst, was mit innerHTML nicht möglich ist

Ändere Attribut X auf Y von Element Z.
Füge Attribut X Element Y hinzu.
Entferne Attriut X von Element Y.

Nimm Element X und verschiebe es in Element Y.
Lösche Element X aus Element Y.

Wobei der erste Block der Beispiele meines Wissens nach garnicht mit innerHTML lösbar ist, ist der 2. Block nur schwer und in keinem Verhältnis im aufwand (In beiden Fällen 1 Zeile mit Nodes gegen mindestens 1 Schleife mit RegExp mit innerHTML) lösbar.

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

28.06.2005 - 08:21

Ok, in Sache "Editieren" sind die nodes weltklasse, nur zum lernen sinds einfach zach

that

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

28.06.2005 - 09:12

Zitat von watchout
In beiden Fällen 1 Zeile mit Nodes gegen mindestens 1 Schleife mit RegExp mit innerHTML

Wer innerHTML für was anderes verwendet, als Content hinzuzufügen oder zu ersetzen und womöglich noch mit RegExp anfängt, HTML zu parsen, dem ist eh nicht mehr zu helfen.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

28.06.2005 - 14:34

Zitat von that
Wer innerHTML für was anderes verwendet, als Content hinzuzufügen oder zu ersetzen und womöglich noch mit RegExp anfängt, HTML zu parsen, dem ist eh nicht mehr zu helfen.

Du hast innerHTML als das "Allheilmittel" angepriesen, nicht ich... Und schon Content ersetzen ist extrem mühsam wenn man den Originaltext nicht kennt.

tomstig:
Verstehe die Schwierigkeit darin einfach nicht.

tomstig

OC Addicted

Registered: Nov 2003
Location: /home/tomstig/
Posts: 1341

28.06.2005 - 19:09

Zitat von watchout
tomstig:
Verstehe die Schwierigkeit darin einfach nicht.

Beispiel?

Du magst ein div einfügen. Das div soll das Attribut "style" beinhalten, welches die Eigenschaften "height: 30px; width: 30px" hat.

Code: PHP

divnode = document.createElement('div');   //das ist noch logisch...

// wenn man jetzt das attribut hinzufügen will
// geht das (rein vom denkansatz) so:
divnode = document.setAttribute('style', 'height: 30px; width: 30px');
// (^ ja ich weiß, das ist falsch)

// so:
divnode.setAttribute('style', 'height: 30px; width: 30px');

// ... oder überhaupt ganz anders/einfacher?

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

28.06.2005 - 22:36

Code: PHP

// Elementknoten
x = document.getElementById(...);

// Attributknoten erstellen
att = document.createAttribute('style');
// Wert dem Attributnknoten zuweisen (kann an beliebiger Stelle geschehen)
att.nodeValue = 'height:30px;wid...';
// Attributknoten dem Element zuweisen
x.setAttributeNode(att);

that

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

29.06.2005 - 00:22

Zitat von watchout
Du hast innerHTML als das "Allheilmittel" angepriesen, nicht ich...

Wo?

Zitat von watchout
Und schon Content ersetzen ist extrem mühsam wenn man den Originaltext nicht kennt.

Den muss ich nicht kennen, den ersetze ich ja. Node finden und innerHTML setzen - weg ist der Originaltext und der neue ist da.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

29.06.2005 - 01:25

Zitat von that
Wo?

"und es weit einfacher und meistens schneller ist als der DOM-Ansatz."
Tatsache ist dass es auf den Anwendungsfall ankommt - In den wenigsten concepts von mir ist innerHTML von irgendeinem Nutzen für mich, deswegen verwende ichs auch überhaupt nicht mehr.
Für echtes dynamisches HTML (also mehr als nur ein countdown-timer oder eine blinkende "6") ist innerHTML nicht wirklich brauchbar, ausser man programmiert das DOM in Javascript nach, was dann aber irgendwie schizophren (und vor allem extrem langsam) wär.

Zitat von that
Den muss ich nicht kennen, den ersetze ich ja. Node finden und innerHTML setzen - weg ist der Originaltext und der neue ist da.

gut, da hab ich dich falsch verstanden.

that

Moderator
Hoffnungsloser Optimist

Registered: Mar 2000
Location: MeidLing
Posts: 11338

29.06.2005 - 21:42

Zitat von watchout
"und es weit einfacher und meistens schneller ist als der DOM-Ansatz."
Tatsache ist dass es auf den Anwendungsfall ankommt

Stimmt - meine Antwort bezog sich auf den Anwendungsfall im Topic dieses Threads.

Die Performancevergleiche sind übrigens hier:

http://www.quirksmode.org/dom/innerhtml.html

tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	26.06.2005 - 23:57 Bisher hab ich das immer mit innerHTML gelöst, jedoch ist diese Eigenschaft nicht w3c konform und "out of date". Wenn man aber mit document.getElementById('xx').firstChild.nodeValue bzw. document.getElementById('xx').firstChild.data einen fett gedruckten Text einfügen will (zb "<b>Hallo!</b>"), dann schreibt er Hallo nicht fettgedruckt hin, sondern er schreibt "<b>Hallo!</b>" hin. Gibt es eine Möglichkeit, dass zu machen? Bearbeitet von tomstig am 28.06.2005, 08:22
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	27.06.2005 - 02:33 klar, dazu muss man nur das DOM-Node System verstanden haben. Und eigentlich sagts der Name eh auch schon: "data" - das sind reine (unparsed) Strings, die kommen genau so auf den bildschirm wie man sie reinschreibt. Willst du jetzt einen fetten text, so musst du ein umschliessendes "B" Element generieren: Code: PHP `bold = document.createElement('b'); text1 = document.createTextNode('Hallo'); bold.appendChild(text1); document.getElementById('xx').appendChild(bold);` ich hoffe da is jetz kein Fehler drin alles nachzulesen unter http://de.selfhtml.org/javascript/objekte/index.htm
that Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	27.06.2005 - 08:57 Zitat von tomstig Bisher hab ich das immer mit innerHTML gelöst, jedoch ist diese Eigenschaft nicht w3c konform und "out of date". Das ist zwar nicht W3C konform aber absolut nicht "out of date", da es alle "gängigen" Browser beherrschen, und es weit einfacher und meistens schneller ist als der DOM-Ansatz.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	27.06.2005 - 16:16 Zitat von that Das ist zwar nicht W3C konform aber absolut nicht "out of date", da es alle "gängigen" Browser beherrschen, und es weit einfacher und meistens schneller ist als der DOM-Ansatz. Man hat einfach viel mehr Möglichkeiten mit Nodes.
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	27.06.2005 - 19:25 Zitat von watchout Man hat einfach viel mehr Möglichkeiten mit Nodes. An dieser Stelle wäre ein Beispiel interessant, wo du etwas mit nodes machst, was mit innerHTML nicht möglich ist BTW: Bei meinem Problem, wegen dem ich frage, will ich eigentlich statt einem <input> ein Code: `<div style="width: 20px; height: 20px; border: 1px solid #000">` einfügen und umgekehrt. Beispiel gibt es hier: http://tomstig.to.funpic.de/umfrage/add_question.php Wenn man bei den radios auf Bild klickt, soll das <div> erscheinen und bei Text das input... Bearbeitet von tomstig am 27.06.2005, 19:30
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	27.06.2005 - 23:26 Hab das ganze mit "display: none" gelöst.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	28.06.2005 - 03:42 Zitat von tomstig An dieser Stelle wäre ein Beispiel interessant, wo du etwas mit nodes machst, was mit innerHTML nicht möglich ist Ändere Attribut X auf Y von Element Z. Füge Attribut X Element Y hinzu. Entferne Attriut X von Element Y. Nimm Element X und verschiebe es in Element Y. Lösche Element X aus Element Y. Wobei der erste Block der Beispiele meines Wissens nach garnicht mit innerHTML lösbar ist, ist der 2. Block nur schwer und in keinem Verhältnis im aufwand (In beiden Fällen 1 Zeile mit Nodes gegen mindestens 1 Schleife mit RegExp mit innerHTML) lösbar.
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	28.06.2005 - 08:21 Ok, in Sache "Editieren" sind die nodes weltklasse, nur zum lernen sinds einfach zach
that Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	28.06.2005 - 09:12 Zitat von watchout In beiden Fällen 1 Zeile mit Nodes gegen mindestens 1 Schleife mit RegExp mit innerHTML Wer innerHTML für was anderes verwendet, als Content hinzuzufügen oder zu ersetzen und womöglich noch mit RegExp anfängt, HTML zu parsen, dem ist eh nicht mehr zu helfen.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	28.06.2005 - 14:34 Zitat von that Wer innerHTML für was anderes verwendet, als Content hinzuzufügen oder zu ersetzen und womöglich noch mit RegExp anfängt, HTML zu parsen, dem ist eh nicht mehr zu helfen. Du hast innerHTML als das "Allheilmittel" angepriesen, nicht ich... Und schon Content ersetzen ist extrem mühsam wenn man den Originaltext nicht kennt. tomstig: Verstehe die Schwierigkeit darin einfach nicht.
tomstig OC Addicted Registered: Nov 2003 Location: /home/tomstig/ Posts: 1341	28.06.2005 - 19:09 Zitat von watchout tomstig: Verstehe die Schwierigkeit darin einfach nicht. Beispiel? Du magst ein div einfügen. Das div soll das Attribut "style" beinhalten, welches die Eigenschaften "height: 30px; width: 30px" hat. Code: PHP `divnode = document.createElement('div'); //das ist noch logisch... // wenn man jetzt das attribut hinzufügen will // geht das (rein vom denkansatz) so: divnode = document.setAttribute('style', 'height: 30px; width: 30px'); // (^ ja ich weiß, das ist falsch) // so: divnode.setAttribute('style', 'height: 30px; width: 30px'); // ... oder überhaupt ganz anders/einfacher?`
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	28.06.2005 - 22:36 Code: PHP `// Elementknoten x = document.getElementById(...); // Attributknoten erstellen att = document.createAttribute('style'); // Wert dem Attributnknoten zuweisen (kann an beliebiger Stelle geschehen) att.nodeValue = 'height:30px;wid...'; // Attributknoten dem Element zuweisen x.setAttributeNode(att);`
that Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	29.06.2005 - 00:22 Zitat von watchout Du hast innerHTML als das "Allheilmittel" angepriesen, nicht ich... Wo? Zitat von watchout Und schon Content ersetzen ist extrem mühsam wenn man den Originaltext nicht kennt. Den muss ich nicht kennen, den ersetze ich ja. Node finden und innerHTML setzen - weg ist der Originaltext und der neue ist da.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	29.06.2005 - 01:25 Zitat von that Wo? "und es weit einfacher und meistens schneller ist als der DOM-Ansatz." Tatsache ist dass es auf den Anwendungsfall ankommt - In den wenigsten concepts von mir ist innerHTML von irgendeinem Nutzen für mich, deswegen verwende ichs auch überhaupt nicht mehr. Für echtes dynamisches HTML (also mehr als nur ein countdown-timer oder eine blinkende "6") ist innerHTML nicht wirklich brauchbar, ausser man programmiert das DOM in Javascript nach, was dann aber irgendwie schizophren (und vor allem extrem langsam) wär. Zitat von that Den muss ich nicht kennen, den ersetze ich ja. Node finden und innerHTML setzen - weg ist der Originaltext und der neue ist da. gut, da hab ich dich falsch verstanden.
that Moderator Hoffnungsloser Optimist Registered: Mar 2000 Location: MeidLing Posts: 11338	29.06.2005 - 21:42 Zitat von watchout "und es weit einfacher und meistens schneller ist als der DOM-Ansatz." Tatsache ist dass es auf den Anwendungsfall ankommt Stimmt - meine Antwort bezog sich auf den Anwendungsfall im Topic dieses Threads. Die Performancevergleiche sind übrigens hier: http://www.quirksmode.org/dom/innerhtml.html

mit nodeValue oder data HTML einfügen?

Forum Index > Software > Coding Stuff

tomstig

watchout

that

watchout

tomstig

tomstig

watchout

tomstig

that

watchout

tomstig

watchout

that

watchout

that