node.insertBefore - Fehler "Node was not found"

[wahsaga]

Hi,

ich bin gerade irgendwie zu blöd, mit insertBefore() zu arbeiten.

Folgendes Formular in einer validen XHTML 1.0 strict Seite:

<form action="#" method="get" id="form1"><p>  
<select id="selectBox" name="selectBox">  
<!--mehrere options ...-->  
</select>  
</p></form>

Darauf angewandt wird folgender Javascript-Code:

selectBox = document.getElementById("selectBox");  
comboBox = document.createElement("input");  
comboBox.type = "text";  
comboBox.id = "comboBox";  
form1 = document.getElementById("form1");  
form1.insertBefore(  
  comboBox,  
  form1  
);

Die Javascript-Konsole des Firefox meldet folgenden Fehler:

Fehler: uncaught exception: [Exception... "Node was not found"  code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"  location: "http://localhost/test/combobox_js.htm Line: xy"]

wobei Line: xy die Zeile ist, in der der zweite Parameter von insertbefore() steht, form1.

Das vorausgehende
form1 = document.getElementById("form1");
klappt noch problemlos, alert(form1) liefert "[object HTMLFormElement]".

Opera mag ebenfalls nicht, bringt aber nur ein noch weniger aussagekräftiges "Unhandled exception: [Object DOMException]" ohne eine Zeilenangabe.

Kann mir mal jemand erklären, wieso da bitte der Node form1 nicht gefunden wird?
Selbstverständlich wird das JS erst ausgeführt, nachdem die Seite geladen und gerendert wurde (alert von form1 klappt ja wie gesagt auch).

Ach ja, und den erzeugten Node comboBox stattdessen mittels form1.appendChild() nach hinten ins Formular einzufügen, klappt ebenfalls problemlos.

gruß,
wahsaga

[Scar]

form1.insertBefore(
  comboBox,
  form1
);

statt form1 willst du vermutlich selectBox innen stehen haben *vermut*

form1.insertBefore(
  comboBox,
  selectBox
);

grüße Chris

[Axel Richter]

Hallo,

ich bin gerade irgendwie zu blöd, mit insertBefore() zu arbeiten.

Ja. ;-))

form1 = document.getElementById("form1");
form1.insertBefore(
  comboBox,
  form1
);

Hm, Du willst also das Element comboBox innerhalb von form1 _vor_ form1 einfügen? Willst Du es nicht eher _vor_ dem SELECT-Element einfügen?

viele Grüße

Axel

[Eternius]

Hallo

  
<script type="text/javascript">  
  selectBox = document.getElementById("selectBox");  
  comboBox = document.createElement("input");  
  comboBox.type = "text";  
  comboBox.id = "comboBox";  
  form1 = document.getElementById("form1");  
  form1.insertBefore(  comboBox,form1.firstChild);  
</script>  

gruss

[wahsaga]

hi,

form1.insertBefore(  comboBox,form1.firstChild);

Ja, damit funktioniert es.

Aber warum kann ich an dieser Stelle nicht die Referenz auf das Selectfeld als zweiten Parameter verwenden, um davor einzufügen?

Egal, ob ich vorher

selectBox = document.getElementById("selectBox");

benutze, um dann die Referenz selectBox dort einzusetzen, oder ob ich

document.getElementById("selectBox")

direkt als zweiten Parameter von insertbefore() einsetze - es kommt immer der beschriebene Fehler.

gruß,
wahsaga

[wahsaga]

hi,

form1.insertBefore(  comboBox,form1.firstChild);

Ja, damit funktioniert es.

Allerdings noch nicht zufriedenstellend - eigentlich müsste mindestens form1.firstChild.firstChild verwendet werden, denn erstes Kind des Formulars ist der Absatz p - und wenn ich das input comboBox _davor_ einfüge, habe ich kein gültiges XHTML 1.0 Strict mehr, weil Formularelemente da nicht einfach so als direkte Kinder von Form herumstehen dürfen, sondern erst mal ein p oder div o.ä. erforderlich ist.

gruß,
wahsaga

[wahsaga]

hi,

eigentlich müsste mindestens form1.firstChild.firstChild verwendet werden

... wobei ich damit mal wieder, na ratet doch mal, welchen Fehler bekomme?

Genau, Exception... "Node was not found"

Stark an seinem Javascript-Verständnis zweifelnd,
wahsaga

[Eternius]

Hallo,

ja genau, aber ich würde fast tippen, dass es halt nur mit direkten Kindern funktioniert:

form -> p -> select -> option
                      -> option
                      -> option

und du willst es an das p vor select hängen

form -> p ->  input
            ->  select -> option
                       -> option

wenn du das element select nimmst und es versuchst über form.insertbefore einzufügen dann sucht die form nach einem direktem Kindelement select

form -> p -> ...
       -> select

welches ja aber gar nicht existiert und würde es dann vor das select einfügen wollen

form -> p -> ...
       -> input
       -> select

Das würde ich jetzt schätzen, ich habe es aber nicht nachgelesen, also keine Garantie.

gruss

[wahsaga]

hi,

ja genau, aber ich würde fast tippen, dass es halt nur mit direkten Kindern funktioniert:

Ja, genau der Gedanke kam mir auch gerade, als ich mir im DOM Inspector das ganze noch mal angeschaut habe ...

[...] und du willst es an das p vor select hängen
wenn du das element select nimmst und es versuchst über form.insertbefore einzufügen dann sucht die form nach einem direktem Kindelement select
welches ja aber gar nicht existiert und würde es dann vor das select einfügen wollen

Ja, genau das wird es gewesen sein.

Das würde ich jetzt schätzen, ich habe es aber nicht nachgelesen, also keine Garantie.

Doch, es ist absolut logisch :-)
Danke trotzdem!

(Und da ich ja vom Selectfeld ausgehen will, werde ich also insertBefore jetzt als Methode von dessen parentNode aufrufen.)

gruß,
wahsaga

[Thomas Meinike]

Hallo,

(Und da ich ja vom Selectfeld ausgehen will, werde ich also insertBefore jetzt als Methode von dessen parentNode aufrufen.)

Genau -- also so:
selectBox.parentNode.insertBefore(comboBox,selectBox);

oder ausgehend von form1:
form1.getElementsByTagName("p")[0].insertBefore(comboBox,selectBox);

BTW: Setze mal vor form1 = document.getElementById("form1"); noch var, da sonst der IE ein Problem hat (bezieht sich auf die gleichnamige ID form1).

MfG, Thomas

[Christian Kruse]

你好 Eternius,

ja genau, aber ich würde fast tippen, dass es halt nur mit direkten
Kindern funktioniert: […]

Ja, stimmt.

再见,
 克里斯蒂安

[wahsaga]

hi,

verflixt, stimmt natürlich - das neue Input soll natürlich vor dem Select eingefügt werden, und so hatte ich's auch ursprünglich.

Aber auch

  
selectBox = document.getElementById("selectBox");  
comboBox = document.createElement("input");  
comboBox.type = "text";  
comboBox.id = "comboBox";  
form1 = document.getElementById("form1");  
form1.insertBefore(  
  comboBox,  
  selectBox  
);

liefert mir den gleichen Fehler.

gruß,
wahsaga

[Christian Kruse]

你好 wahsaga,

selectBox = document.getElementById("selectBox");
comboBox = document.createElement("input");
comboBox.type = "text";
comboBox.id = "comboBox";
form1 = document.getElementById("form1");
form1.insertBefore(
  comboBox,
  selectBox
);

  
Sicher, dass das Element selectBox direktes Kind des Elements form1 ist?  
Kein <p> oder <div> oder so drum herum?  
  
再见,  
 克里斯蒂安  

-- 
<Tim> Ich bin nicht hier, um zu helfen. Mir hilft ja auch keiner. Sogar mein Brötchen muss ich mir jetzt selber schmieren.  
  
<http://wwwtech.de/>  

[wahsaga]

hi,

Sicher, dass das Element selectBox direktes Kind des Elements form1 ist?

Nein, ziemlich sicher dass dem soagr _nicht_ so ist.

Kein <p> oder <div> oder so drum herum?

</faq/#Q-09c>

sorry, could wirklich nicht widerstehen :-) [1]

gruß,
wahsaga

[1] Ich weiß, nicht so große Klappe haben, wenn das Problem in meiner Logik lag ...

[Christian Kruse]

你好 wahsaga,

Kein <p> oder <div> oder so drum herum?

</faq/#Q-09c>

sorry, could wirklich nicht widerstehen :-) [1]

Jaja, kann mir ja auch schonmal passieren ;)

再见,
 克里斯蒂安