javascript innerHTML sans childNodes?

Question

im avoir un problème firefox où je ne vois pas le bois pour les arbres utilisant ajax i get source html à partir d'un script php

ce code html contient une balise et dans le tbody un peu plus tr/td de

Maintenant, je veux ajouter ce taincie Plaincode à une table existante. mais il y a une autre condition: la table fait partie d'un formulaire et contient donc des cases à cocher et des listes déroulantes. si je devrais utiliser table.innerHTML + = content; firefox recharge de la table et de réinitialiser tous les éléments dans ce qui isnt très facile d'utilisation comme id aiment avoir

ce que j'ai est-ce

// content equals transport.responseText from ajax request 
function appendToTable(content){ 
    var wrapper = document.createElement('table'); 
    wrapper.innerHTML = content; 
    wrapper.setAttribute('id', 'wrappid'); 
    wrapper.style.display = 'none'; 
    document.body.appendChild(wrapper); 

    // get the parsed element - well it should be 
    wrapper = document.getElementById('wrappid'); 
    // the destination table 
    table = document.getElementById('tableid'); 

    // firebug prints a table element - seems right 
    console.log(wrapper); 
    // firebug prints the content ive inserted - seems right 
    console.log(wrapper.innerHTML); 

    var i = 0; 
    // childNodes is iterated 2 times, both are textnode's 
    // the second one seems to be a simple '\n' 
    for(i=0;i<wrapper.childNodes.length;i++){ 
     // firebug prints 'undefined' - wth!?? 
     console.log(wrapper.childNodes[i].innerHTML); 
     // firebug prints a textnode element - <TextNode textContent=" "> 
     console.log(wrapper.childNodes[i]); 
     table.appendChild(wrapper.childNodes[i]); 
    } 
    // WEIRD: firebug has no problems showing the 'wrappid' table and its contents in the html view - which seems there are the elements i want and not textelements 
} 

soit cela est si trivial que je ne vois pas le problème ou est un cas d'angle et j'espère que quelqu'un ici a autant d'expérience pour donner un conseil sur ce - tout le monde peut imaginer pourquoi je reçois des textnodes et pas les éléments de dom finalement analysés je m'attends?

BTW: BTW je ne peux pas donner un exemple complet parce que je ne peux pas écrire une petite pièce non travail du Code son un de ces bugs qui occure dans la nature et non pas dans mon Testset

thx tous

Answer 1

Vous êtes probablement confronté à une bizarrerie de Firefox en suivant les spécifications du W3C. Dans la spécification, les espaces entre les balises sont des nœuds "texte" au lieu des éléments. Ces TextNodes sont renvoyés dans childNodes. This other answer décrit une solution de contournement. Aussi, en utilisant quelque chose comme JQuery rend cela beaucoup plus facile.

Answer 2

Je m'attendrais à ce comportement dans n'importe quel navigateur lorsque l'opérande + = écrase ce qui est déjà dans la table par définition. Deux solutions:

Au lieu de recevoir le code HTML de votre fichier PHP, demandez à PHP de générer une liste d'éléments à ajouter à la table. Comma/tab séparé, peu importe. Utilisez ensuite Table.addRow(), Row.addCell() et cell.innerHTML pour ajouter les éléments à la table. C'est comme cela que je suggérerais de le faire, inutile de créer des éléments GUI dans deux fichiers séparés.

L'autre solution consiste à enregistrer toutes les données de formulaire qui ont déjà été entrées dans des variables JavaScript locales, à ajouter la table et à recharger les données dans les champs de formulaire.

Answer 3

Eh bien, renvoyer un objet JSON avec les nouvelles données semble être la meilleure option. Ensuite, vous pouvez synthétiser les éléments de table supplémentaires en l'utilisant.

Dans le cas où l'on est forcé d'obtenir le HTML brut comme réponse, il est possible d'utiliser var foo = document.createElement('div');, par exemple, puis foo.innerHTML = responseText;. Cela crée un élément qui n'est ajouté à rien, mais qui héberge la réponse HTML analysée.
Ensuite, vous pouvez explorer l'élément foo, obtenir les éléments dont vous avez besoin et les ajouter à la table d'une manière DOM-friendly.

Edit:

Eh bien, je pense que je comprends votre point maintenant.
wrapper est un élément de table lui-même. Les nœuds résident sous le tbody, un enfant de wrapper qui est son lastChild (ou vous pouvez y accéder via son membre tBodies[0], dans Firefox).
Puis, en utilisant l'élément tBody, je pense que vous seriez en mesure d'obtenir ce que vous voulez.

BTW, vous n'avez pas besoin d'ajouter l'emballage au document avant d'ajouter ses enfants à la table, donc pas besoin de le cacher, etc.