document.insertBefore jette l'erreur

Question

J'ai ce morceau de code:

<textarea id="test" style="width: 400px; height: 100px"></textarea> 
    <script> 
    var inserting = document.createElement("div"); 
    document.insertBefore(inserting,document.getElementById("test")); 
    </script> 

qui devrait insérer DIV id=inserting avant textarea id=test, mais cette erreur se produit

Node was not found" code: "8 

J'utilise FireFox 3.6 avec Firebug sur Windows XP. Où est le problème?

Answer 1

insertBefore besoins à fait appel à l'élément parent de l'élément avant qui est inséré:

<textarea id="test" style="width: 400px; height: 100px"></textarea> 
    <script> 
    var inserting = document.createElement("div"); 
    var insertAt = document.getElementById("test"); 
    insertAt.parentNode.insertBefore(inserting,insertAt); 
    </script> 

Answer 2

Comme d'autres l'ont mentionné, vous devez appeler insertBefore sur le parent du noeud <textarea>. Selon la documentation de l'API pour Node.insertBefore:

Résumé

Inserts le noeud spécifié avant un élément de référence comme un enfant du noeud courant.

Syntaxe

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

Si referenceElement est nul, newElement est inséré à la fin de la liste des nœuds enfants.

• insertedElement Le noeud étant inséré, soit newElement
• parentElement Le parent du noeud nouvellement inséré.
• newElement Le noeud à insérer.
• referenceElement Le noeud devant lequel newElement est inséré.

Donc, vous voulez dire quelque chose le long des lignes de:

parent_element_goes_here.insertBefore(inserting,document.getElementById("test")); 

Au lieu de:

document.insertBefore(inserting,document.getElementById("test")); 

---

En outre, votre code peut être exécutaient avant que le DOM a terminé être chargé. Vous pouvez vous assurer que tous les éléments DOM sont chargés à l'aide du gestionnaire d'événements window.onload. A partir des documents MDC:

L'événement de chargement se déclenche à la fin du processus de chargement de document. À ce stade, tous les objets dans le document sont dans le DOM, et toutes les images et les sous-cadres ont terminé le chargement.

Ainsi, au lieu d'appeler directement votre code, vous feriez ceci:

window.onload=function(){ 
    ... 
} 

Answer 3

.insertBefore() doit être appelée sur un nœud DOM. document n'est pas un noeud DOM. Essayez d'utiliser le noeud parent de votre zone de texte.

Answer 4

Vous voulez ajouter votre nœud à document.body pas document:

document.body.insertBefore(inserting, document.getElementById("test"));