mit nodeValue oder data HTML einfügen?

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/mit_nodevalue_oder_data_html_einfuegen_144789/page_1 - zur Vollversion wechseln!

tomstig schrieb am 26.06.2005 um 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?

watchout schrieb am 27.06.2005 um 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 schrieb am 27.06.2005 um 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 schrieb am 27.06.2005 um 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 schrieb am 27.06.2005 um 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...

tomstig schrieb am 27.06.2005 um 23:26

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

watchout schrieb am 28.06.2005 um 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 schrieb am 28.06.2005 um 08:21

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

that schrieb am 28.06.2005 um 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 schrieb am 28.06.2005 um 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 schrieb am 28.06.2005 um 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 schrieb am 28.06.2005 um 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 schrieb am 29.06.2005 um 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 schrieb am 29.06.2005 um 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 schrieb am 29.06.2005 um 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