Element erstellen, in Quelltext einfügen und auf dieses zugreifen können

R4v3r · 17.12.2009, 13:11

Hallo,

das ist bei mir aktuell die IST-Situation:

Über eine externe Javascript-Datei wird eine Funktion in eine Seite implementiert, welche genau an der Stelle, wo der script-Tag steht, ein Element hinzufügen soll. Auf das eingefügte Element muss dann zugegriffen werden.

Aktuell realisiere ich das per:
document.write('<div id="mydiv">CONTENT</div>');
var div = document.getElementById('mydiv');

Nun kann über über die Variable div auf das Element zugreifen und es bearbeiten.

Das Problem ist nun, dass ich auf den Zwischenschritt mit der mydiv-ID verzichten möchte, weil es einerseits zu einer doppelten ID-Vergabe kommen kann (also dass schon ein Element mit dieser ID vorhanden ist) und es andererseits sehr einfach ist, auf mein hinzugefügtes Element vom Quelltext der Seite aus zuzugreifen.

Dazu erstelle ich das Element per var div = document.createElement('div');. Nun habe ich ebenfalls das Element in meiner Variable stehen und kann dieses manipulieren.

Wie kann ich nun dieses Element genau an der Stelle einfügen, an der der script-Tag im Quelltext steht? Oder gibt es eine andere Methode, auf ein Element zugreifen zu können, ohne dies über eine ID aus dem Quelltext herauslesen zu müssen?

Achja, mir ist natürlich bewusst, dass ich z. B. eine dynamisch generierte ID verwenden kann, die so komplex ist, dass es absolut unwahrscheinlich ist, dass diese bereits vorhanden ist. Ebenfalls ist mir klar, dass man von dem Host-Quelltext aus auch ohne eine ID auf das Element zugreifen kann. Das Workarrounds vorhanden sind, ist mir somit klar, ich möchte nur wissen, ob es eine schöne Lösung ohne Workarround gibt

Vielen Dank

nikosch · 17.12.2009, 16:07

Erzeuge das Insert als echten DOM-Knoten und achte darauf, den Handler (die Variable) nicht wegzuwerfen.

draco88 · 17.12.2009, 16:23

SELFHTML: JavaScript / Objektreferenz / node
Das is die Funktion die du suchst.

Wenn du jetzt viel mit dem DOM arbeitest würd ich aber eher empfehlen auf ein Framework wie prototype oder jQuery zu setzten, da da die DOM Verarbeitung um einiges einfacher und schneller geht.

lg
draco

R4v3r · 17.12.2009, 16:46

Hallo ihr beiden,

danke für die Antworten!!!

@nikosch: Was genau meinst du? Das von mir beschriebene document.createElement?

@draco88: Die Funktion ist mir natürlich bekannt (ich bin kein JS-Anfänger

). Leider bekomme ich (meines Wissens nach) damit das Element nicht genau an die Stelle, wo der script-Tag und somit auch die einfügende Funktion steht. Außerdem ist problematisch, dass sich das DOM noch aufbaut, während das Element eingefügt wird.

nikosch · 17.12.2009, 17:14

Zitat:

Außerdem ist problematisch, dass sich das DOM noch aufbaut, während das Element eingefügt wird.

Das ist natürlich problematisch. Warum ist das nötig?

R4v3r · 17.12.2009, 18:03

Das ist notwendig, damit der gesamte Ladeprozess der Seite so kurz wie möglich ist.

nikosch · 17.12.2009, 18:05

Kannst Du da nicht serverseitig was machen? Sonst tauschst Du ja ein Problem gegen ein anderes ein. Zur Not könntest Du einen Platzhalter setzen und dort später Deinen DOM-Knoten einhängen. Der Ladeprozess ist dann aber auch beeinträchtigt. Aber das ist er ja auch, wenn Du im Nachhinein Dein „write“ bearbeiten möchtest.

draco88 · 17.12.2009, 21:22

Solange der DOM-Baum noch nicht fertig geladen/gerendert ist sollte man ihn eh nicht manipulieren, das kann in speziellen Fällen den ganzen Browser abschießen(selbst schon erlebt :/) oder zumindest verhindern, dass die Seite angezeigt wird. DOM Manipulation immer erst nach dom:ready, sonst spielst du russisch Roulette mit deinen Besuchern :P

lg
draco

R4v3r · 18.12.2009, 11:33

Da hast du natürlich recht

Mit document.write ist das kein Problem, nur mit appedChild scheint das echt nicht zu gehen.

Also werde ich wohl auf den fertigen DOM warten

Folgendes sollte ja der frühstmögliche Zeitpunkt sein, oder? (f ist die Funktion, die dann ausgeführt wird).

Code:

if(document.addEventListener)
	document.addEventListener('DOMContentLoaded', f, false);
else
	document.onreadystatechange = function(){ if(document.readyState == 'interactive' || document.readyState == 'complete')	f(); };

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Array Element zwischen zwei andere einfügen	Ti-Systems	PHP Tipps 2009	6	19.09.2009 18:01
Besucher können Bilder einfügen	Schnaddi	PHP Tipps 2008	7	06.05.2008 10:52
Objekt erstellen, und direkt darauf zugreifen	I-Spy	Datenbanken	2	26.11.2005 19:56
Mysql daten in Selct element einfügen		PHP Tipps 2005	4	08.03.2005 17:44
Mysql daten in Selct element einfügen		PHP Tipps 2005	5	08.03.2005 16:48
Subdomain soll nur auf den Pfad zugreifen können...		Server, Hosting und Workstations	3	02.12.2004 15:30
PHP Quelltext aus Datenbank einfügen		PHP-Fortgeschrittene	2	07.11.2004 17:26
array_push nur in begrenzter Anzahl ausführen ?		PHP Tipps 2004	2	07.09.2004 09:05

17.12.2009, 13:11
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Element erstellen, in Quelltext einfügen und auf dieses zugreifen können Hallo, das ist bei mir aktuell die IST-Situation: Über eine externe Javascript-Datei wird eine Funktion in eine Seite implementiert, welche genau an der Stelle, wo der script-Tag steht, ein Element hinzufügen soll. Auf das eingefügte Element muss dann zugegriffen werden. Aktuell realisiere ich das per: document.write('<div id="mydiv">CONTENT</div>'); var div = document.getElementById('mydiv'); Nun kann über über die Variable div auf das Element zugreifen und es bearbeiten. Das Problem ist nun, dass ich auf den Zwischenschritt mit der mydiv-ID verzichten möchte, weil es einerseits zu einer doppelten ID-Vergabe kommen kann (also dass schon ein Element mit dieser ID vorhanden ist) und es andererseits sehr einfach ist, auf mein hinzugefügtes Element vom Quelltext der Seite aus zuzugreifen. Dazu erstelle ich das Element per var div = document.createElement('div');. Nun habe ich ebenfalls das Element in meiner Variable stehen und kann dieses manipulieren. Wie kann ich nun dieses Element genau an der Stelle einfügen, an der der script-Tag im Quelltext steht? Oder gibt es eine andere Methode, auf ein Element zugreifen zu können, ohne dies über eine ID aus dem Quelltext herauslesen zu müssen? Achja, mir ist natürlich bewusst, dass ich z. B. eine dynamisch generierte ID verwenden kann, die so komplex ist, dass es absolut unwahrscheinlich ist, dass diese bereits vorhanden ist. Ebenfalls ist mir klar, dass man von dem Host-Quelltext aus auch ohne eine ID auf das Element zugreifen kann. Das Workarrounds vorhanden sind, ist mir somit klar, ich möchte nur wissen, ob es eine schöne Lösung ohne Workarround gibt Vielen Dank


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.12.2009, 16:07
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Erzeuge das Insert als echten DOM-Knoten und achte darauf, den Handler (die Variable) nicht wegzuwerfen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.12.2009, 16:23
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	SELFHTML: JavaScript / Objektreferenz / node Das is die Funktion die du suchst. Wenn du jetzt viel mit dem DOM arbeitest würd ich aber eher empfehlen auf ein Framework wie prototype oder jQuery zu setzten, da da die DOM Verarbeitung um einiges einfacher und schneller geht. lg draco

17.12.2009, 16:46
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Hallo ihr beiden, danke für die Antworten!!! @nikosch: Was genau meinst du? Das von mir beschriebene document.createElement? @draco88: Die Funktion ist mir natürlich bekannt (ich bin kein JS-Anfänger ). Leider bekomme ich (meines Wissens nach) damit das Element nicht genau an die Stelle, wo der script-Tag und somit auch die einfügende Funktion steht. Außerdem ist problematisch, dass sich das DOM noch aufbaut, während das Element eingefügt wird.

17.12.2009, 18:03
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Das ist notwendig, damit der gesamte Ladeprozess der Seite so kurz wie möglich ist.

17.12.2009, 18:05
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Kannst Du da nicht serverseitig was machen? Sonst tauschst Du ja ein Problem gegen ein anderes ein. Zur Not könntest Du einen Platzhalter setzen und dort später Deinen DOM-Knoten einhängen. Der Ladeprozess ist dann aber auch beeinträchtigt. Aber das ist er ja auch, wenn Du im Nachhinein Dein „write“ bearbeiten möchtest. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.12.2009, 21:22
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Solange der DOM-Baum noch nicht fertig geladen/gerendert ist sollte man ihn eh nicht manipulieren, das kann in speziellen Fällen den ganzen Browser abschießen(selbst schon erlebt :/) oder zumindest verhindern, dass die Seite angezeigt wird. DOM Manipulation immer erst nach dom:ready, sonst spielst du russisch Roulette mit deinen Besuchern :P lg draco

18.12.2009, 11:33
R4v3r Erfahrener Benutzer Registriert seit: 17.11.2003 Beiträge: 212	Da hast du natürlich recht Mit document.write ist das kein Problem, nur mit appedChild scheint das echt nicht zu gehen. Also werde ich wohl auf den fertigen DOM warten Folgendes sollte ja der frühstmögliche Zeitpunkt sein, oder? (f ist die Funktion, die dann ausgeführt wird). Code: if(document.addEventListener) document.addEventListener('DOMContentLoaded', f, false); else document.onreadystatechange = function(){ if(document.readyState == 'interactive' \|\| document.readyState == 'complete') f(); }; Geändert von R4v3r (18.12.2009 um 11:34 Uhr). Grund: BB Tags nicht erkannt