Ajouter un noeud complexe

Bonsoir tout le monde,

Dans ma page HTML, j'ai un <div id="a_modifier"></div> et je veux
ajouter un noeud dedans (coté client, quand il clique sur un bouton).

je fais donc un javascript avec
var theFather = GetElementById("a_modifier");
var theChild = document.createElement("p");
theChild.appendChild(document.createTextNode("Du texte"));

je pense qu'ici tu peux simplifier et te permettre innerHTML

theChild.innerHTML = 'du texte';

theFather.appendChild(theChild);

Ça marche bien. Maintenant, je veux mettre un noeud plus complexe du genre
<div>
<p>foo<br />bar</p>
<p>bar&nbsp;: jo</p>
</div>

Et là, enfin, les questions :-) :
-est-ce que je peux echaper à tous les createElement ou est-ce qu'il
existe une fonction qui interpreterait le HTML que je lui donnerais?

tu peux, si tes éléments sont nombreux et répétitifs
- cloner l'élement voulu
- lui donner un id
- l'appendChilder au bon endroit

//variables globales données une seule fois
var p1 = document.getElementById('p1');
p1.style.visibility = 'hidden';
var i = 10;

// copie de l'élément type, modif, collage
var truc = p1.cloneNode();
truc.id = 'p'+i; i++;
truc.innerHTML = 'bar : jo';

-sinon, comment je fais le "&nbsp;"?

truc.style.whiteSpace = 'nowrap';

truc.style.visibility = 'visible';
theFather.appendChild(truc);



je suppose que tu peux aussi
te fabriquer une fonction générique qui s'occupera du bazar

function nouveau(tag,id,contenu,lieu) {
var truc = document.createElement(tag);
truc.id = id;
if(contenu != null || contenu != '')
truc.innerHTML = contenu;
lieu = document.getElementById(lieu);
lieu.appendChild(truc);
}

<button onclick="i++;
nouveau('P','p_'+i,'Article '+i+' : ','monForm');
nouveau('INPUT','in_'+i,'','p_'+i);
"> nouveau champ </button>

Pour les curieux, c'est pour faire un formulaire qui grandit à volonté
au fur et à mesure qu'on y saisit des informations, donc les éléments à
ajouter sont plutot longs (au moins deux select avec des options, deux
input...) et j'ai pas trop envie de construire l'arbre à la main.

pour les options du select tu peux bien les rajouter quand tu veux
via le JavaScript "normal"

var sel = document.forms[0].elements['monSelect'].options;
sel[sel.length] = new Option('p1.htm','page un');


Ceci dit,
tu peux tout aussi bien avoir tout ce que tu as besoin
en mettant en caché les éléments non directement nécessaires
et n'avoir qu'à repasser en visibles ceux voulus au fur et à mesure.

--
Stephane Moriaux et son [moins] vieux Mac

Dans ma page HTML, j'ai un <div id="a_modifier"></div> et je veux
ajouter un noeud dedans (coté client, quand il clique sur un bouton).
[...] Maintenant, je veux mettre un noeud plus complexe du genre
<div>
<p>foo<br />bar</p>
<p>bar&nbsp;: jo</p>
</div>

Et là, enfin, les questions :-) :
-est-ce que je peux echaper à tous les createElement ou est-ce qu'il
existe une fonction qui interpreterait le HTML que je lui donnerais?

innerHTML n'est pas standard (même si c'est supporté par la plupart
des navigateurs). Le plus propre est d'utiliser les méthodes
idoines.

-sinon, comment je fais le "&nbsp;"?

Pour insérer un caractère codé par une entité en HTML, il suffit de
donner son code Unicode 16 bits. Pour &nbsp; c'est u00A0 ce qui
donne :
"baru00A0: jo"

Pour obtenir ces codes se reporter aux fichiers définissant les
entités qui accompagnent les DTD par exemple :

http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent et
http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent

Pour chaque entité le code Unicode hexadécimal est indiqué par
U+XXXX. Il suffit pour obtenir l'écriture javascript de remplacer
U+ par u (nbsp -> U+00A0 -> u00A0).

--
Y.D.

se reporter aux fichiers définissant les
entités qui accompagnent les DTD par exemple :

http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent et

mon FF ne veut pas m'ouvrir, me montrer ces *.ent

http://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent

Pour chaque entité le code Unicode hexadécimal est indiqué par
U+XXXX. Il suffit pour obtenir l'écriture javascript de remplacer
U+ par u (nbsp -> U+00A0 -> u00A0).

je n'ai pas bien compris qu'il faille encoder l'espace insécable

les html-entités sont proscrites en xhtml ?



--
Stephane Moriaux et son [moins] vieux Mac

http://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent et

mon FF ne veut pas m'ouvrir, me montrer ces *.ent

Ce sont des fichiers texte ! Ouvre-les avec un éditeur
quelconque.

Pour chaque entité le code Unicode hexadécimal est indiqué par
U+XXXX. Il suffit pour obtenir l'écriture javascript de remplacer
U+ par u (nbsp -> U+00A0 -> u00A0).

je n'ai pas bien compris qu'il faille encoder l'espace insécable

les html-entités sont proscrites en xhtml ?

Absolument pas (encore faut-il que la DTD utilisée inclut les
fichiers de déclaration d'entités). Le problème est au niveau
du javascript. Si tu crées un noeud texte contenant &nbsp; un
alert du texte créé te donnera &amp;nbsp; et l'affichage qui va
avec.

Pour contourner, je n'ai pas trouvé (je n'ai pas cherché plus
que ça...) autre chose que mettre le caractère Unicode dans la
chaîne.

C'est de toute façon ce que fait le HTML via les fichiers de
déclarations d'entités, puisque &nbsp; n'est qu'une abréviation
mnémotechnique du code 160 (décimal) ou 00A0 (en hexadécimal).

--
Y.D.

les html-entités sont proscrites en xhtml ?

Absolument pas (encore faut-il que la DTD utilisée inclut les
fichiers de déclaration d'entités). Le problème est au niveau
du javascript. Si tu crées un noeud texte contenant &nbsp; un
alert du texte créé te donnera &amp;nbsp; et l'affichage qui va
avec.

mais la question était d'écrire le truc sur la page
pas de le faire interpréter par le JS

Et si le JS veut vraiment interpréter quand on ne lui demande pas
le contournement à l'ancienne ne ferait-il pas l'affaire ?

truc.innerHTML = 'voici'+'&'+'nbsp;: resultat';

Pour contourner, je n'ai pas trouvé (je n'ai pas cherché plus
que ça...) autre chose que mettre le caractère Unicode dans la
chaîne.

C'est de toute façon ce que fait le HTML via les fichiers de
déclarations d'entités, puisque &nbsp; n'est qu'une abréviation
mnémotechnique du code 160 (décimal) ou 00A0 (en hexadécimal).

oui en JS (de base) (mode quirks ?)
alert('voici xa0 xa0 xa0 un peu d'espace');
devrait, théoriquement faire

(pas vérifié pour cet insécable)


--
Stephane Moriaux et son [moins] vieux Mac

innerHTML n'est pas standard

Quel dommage... C'est exactement ce que je cherchais.

Le plus propre est d'utiliser les méthodes
idoines.

Donc une floppée de createElement(), appendChild(), createTextNode(),
createAttributeNode()... Je suis triste, mais merci quand même.

-sinon, comment je fais le "&nbsp;"?
Pour insérer un caractère codé par une entité en HTML, il suffit de

donner son code Unicode 16 bits.

Yep, c'est ça que je cherchais, merci !

Merci également à ASM pour son idée de clonage de noeud. Je vais
réfléchir à ce qui conviendra le mieux.
--
Vincent Jacques

"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème."
Devise Shadok

les html-entités sont proscrites en xhtml ?

en xhtml non je les ai utilisé sur mon site.
par contre en xml il faut "échapper" l'esperluette (en fait xml de base
ne connait pas les entités html)(bon c'est sur que &amp;eagrave; c'est
pas du lisible lisible.

j'ai juste ? c'est de tête tout ça.


--
Dans la connaissance du monde, ceux qui ne savent rien en savent
toujours autant que ceux qui n'en savent pas plus qu'eux.
-+- Pierre Dac -+-

innerHTML n'est pas standard

Quel dommage... C'est exactement ce que je cherchais.

Tu peux commencer par utiliser innerHTML (c'est lesquels de navigateurs
qui ne l'accepte pas ?)
(par contre attention l'arbre DOM dépend de la manière ou l'ordre don t
tu renseignes innerHTML ça peut donner des bugs cocasses).
ex sous firefox
menu.innerHTML="<form>"
menu.innerHTML+="<input ......>"
menu.innerHTML+="</form>"

et input n'est pas fils de form -> le formulaire délire

--
Vincent Jacques

"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème."
Devise Shadok

+1
totalement d'accord avec cette devise s'il n' y a pas de solution ce
n'est plus un problème c'est un fait.
--
Un blog sur les pages persos de wanadoo ?
chtioblogue : http://perso.wanadoo.fr/bertrand.belguise/blog/blog.html
(Totalement client-side sans php ni base de donnée)

innerHTML n'est pas standard

Quel dommage... C'est exactement ce que je cherchais.

Tu peux commencer par utiliser innerHTML (c'est lesquels de navigateurs
qui ne l'accepte pas ?)

Oui je m'y suis résolu. Merci donc à ceux qui m'ont orienté vers cette
solution. Il faut dire que là, je génère mon javascript en fonction d'une
base MySQL consultée en php, donc j'ai le cerveau qui a un peu de mal à
suivre...

(en bref, pour les curieux, je mets des select dont les options (des
métiers, en gros) sont tirées d'une base de données, et je veux que mes
utilisateurs puissent ajouter autant de personnes qu'ils veulent dans le
formulaire, d'où du php qui crée du javascript qui crée du HTML. Je vous
raconte pas les merdes dans les guillemets des chaines de caractères...)

(par contre attention l'arbre DOM dépend de la manière ou l'ordre dont
tu renseignes innerHTML ça peut donner des bugs cocasses).
ex sous firefox
menu.innerHTML="<form>"
menu.innerHTML+="<input ......>"
menu.innerHTML+="</form>"

et input n'est pas fils de form -> le formulaire délire

yep, ça, je l'avais vu venir, j'ai fait:
var theHTML="<form>"
theHTML+="<input ......>"
theHTML+="</form>"
theChild.innerHTML = theHTML

"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème."
Devise Shadok

+1
totalement d'accord avec cette devise s'il n' y a pas de solution ce
n'est plus un problème c'est un fait.

Eh eh, c'est bien là mon interprétation de cette devise, mais peu de gens
la partagent.

--
Vincent Jacques

"S'il n'y a pas de solution, c'est qu'il n'y a pas de problème."
Devise Shadok