Discussion :

[danyboy85]

Bonjour,

Je devéloppe une application J2EE avce Eclipse.

J'ai une page HTML qui utilie Ajax pour envoyer une requête au serveur de manière asynchrone.

De cette requête, le serveur me renvoie un document xml qui représente en fait un <div> avec un bouton à l'intérieur.

Réponse renvoyée par les serveur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id='conteneur'>
       <input type='button' value='Bonjour' />
</div>

Le problème, c'est que je voudrais insérer ce <div> dans ma page.

Je récupère mon document xml par le biais de la méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var xmldoc = req.responseXml

mais ensuite je ne sais pas comment faire pour insérer le <div> dans un autre <div>.

J'ai essayé ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var xmldoc = req.responseXml
document.getElementById('divCorps').appendChild(xmldoc);

mais IE me renvoie une erreur javascript : "Cette interface n'est pas prise en charge". C'est bien la première fois que j'ai cette erreur-là !

Quequ'un a-t-il une réponse ou un avis sur la question ?

[titoumimi]

ton div cible, il a bien un Id ?

si c'est le cas, un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById('divCorps').innerHTML =xmldoc

devrait suffire, non ?

[danyboy85]

Oui ca, ca marche sauf qu'il ne faut pas utiliser req.responsesXml mais req.responsesText.

Le problème est que le innerHTML remplace tout ce qui est contenu dans le <div>. Moi je ne veux pas remplacer ce qui est contrenu dans le <div> mais ajouter d'autres éléments.

C'est pour cela que j'ai pensé à la méthode appendChild(object) mais je ne connait pas les limites de celle-ci.

Par exemple j'utilise souvent ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var unDiv = document.createElement("div");
unDiv.setAttribute("id","div1");
...
document.appendChild(unDiv);

et ca marche très bien !

Mais là je pars d'une variable Objet (req.responsesXml) ou d'une chaine de caractères(req.responsesText) et à partir de ces variables, je ne sais pas quoi passer en paramètre à la méthode appendChild() pour ne pas avoir cette erreur "Cette interface n'est pas prise en charge" ?

[titoumimi]

mes excuses alors

[denisC]

Le problème est que le innerHTML remplace tout ce qui est contenu dans le <div>. Moi je ne veux pas remplacer ce qui est contrenu dans le <div> mais ajouter d'autres éléments.

Facile à contourner, en faisant simplement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
monElement.innerHTML += "nouveau texte ave <balises>....";

C'est pour cela que j'ai pensé à la méthode appendChild(object) mais je ne connait pas les limites de celle-ci.

Fonction du DOM, ce n'est pas un object que tu appendes, mais un noeud DOM.

Mais là je pars d'une variable Objet (req.responsesXml) ou d'une chaine de caractères(req.responsesText) et à partir de ces variables, je ne sais pas quoi passer en paramètre à la méthode appendChild() pour ne pas avoir cette erreur "Cette interface n'est pas prise en charge" ?

Ca ne marche pas, parcequ'un noeud appartient de façon inaltérable (d'après la norme DOM) à son document. Donc, en DOM, tu ne peux insérer un noeud d'un document dans un autre. Et la, tu essayes d'insérer le document en entier dans un autre document.

Les solutions:

• La plus simple : cf ci dessus (innerHTML)
• La plus DOM : Il faut recopier les noeuds un par un (l'ensemble du contenu des noeuds). En résumé, tu veux insérer sans aucune modif, tu prends la permière solution

[danyboy85]

Merci beaucoup pour ta réponse. En effet le innerHTML fonctionne très bien mais lorsque ma page contient beaucoup d'éléments, le temps de réponse peut être parfois long.

C'est donc pour cela que j'aurais souhaité utiliser le appendChild qui ne fait qu'ajouter un noeud à l'arborescenbce du DOM.

Mais bon avec les (très bonnes) explications que tu m'a donné, il est clair que le innerHTML reste la meilleure solution.

Je considère donc que le problème est résolu. Merci à titoumimi et à denisC