OVH Cloud OVH Cloud

Créer un élément et lui affecter un id

25 réponses
Avatar
BMR
Bonjour,

Je voudrais créer un élément et lui affecter un id, pour le retrouver
dans une autre fonction et éviter de le mettre en variable globale. Mais
je n'y arrive pas avec ce code (ni sous IE ni sous Firefox) :

var boite_aide = document.createElement("DIV");
boite_aide.setAttribute("id", "boite_aide");

ou bien

var boite_aide = document.createElement("DIV");
boite_aide.attributes["id"].nodeValue = "boite_aide";

pour le retrouver : var obj = document.getElementById("boite_aide");

Réponse du debugger de Firefox : "boite_aide.attributes.id has no
properties" ou "obj has no properties".

Merci,

BMR

10 réponses

1 2 3
Avatar
BMR
J'abuse encore... car j'ai un autre souci. Le script démarre grâce à
<body onload="init()">. Toujours pour séparer le script du HTML,
j'aimerais écrire qqch du genre document.onload = init; dans le script.
Mais évidemment ça ne marche pas. Avec un getElementsByName("BODY") non
plus, du fait qu'avant <body> Javascript ne sait pas ce que c'est. Une
idée ?

BMR


Bonjour,

Je voudrais créer un élément et lui affecter un id, pour le retrouver

var boite_aide = document.createElement("DIV");
boite_aide.setAttribute("id", "boite_aide");";



pour le retrouver : var obj = document.getElementById("boite_aide");

Réponse du debugger de Firefox : "boite_aide.attributes.id has no
properties" ou "obj has no properties".



Ha Ha ? FF aurait-il la même maladie que mon IE ? (*)

ou bien :
as-tu seulement affecté des propriétés (ou autres attributs)
à ton elément créé ?
S'il n'en a pas, il ne peut les inventer.

(*)
Pour affecter un id à un élément créé
je suis obligé de l'appendChilder d'abord
puis de le récupérer par sa position dans l'arbre de son tag
Une variante consisterait à innerHTMLer tout l'bazard.
(pas trop propre)




Avatar
YD
Je voudrais créer un élément et lui affecter un id, pour le
retrouver dans une autre fonction et éviter de le mettre en variable
globale. Mais je n'y arrive pas avec setAttribute("id", );


Les DIV ont un attribut id donc :

boite_aide.id="boite_aide";




En théorie, c'est strictement identique, donc si ça résoud le problème
de BRM comme cela semble être le cas, je veux bien qu'on m'explique le
pourquoi du comment.


En théorie, oui. En pratique, on a remarqué (cf. fils précédents sur ce
sujet) que dans le cas d'un élément HTML il valait mieux utiliser le
DOM 2 HTML plutôt que la syntaxe XML classique -- surtout pour IE.

Donc, quand un élément HTML est créé, il vaut mieux utiliser ses
propriétés (id, href, src, title...) plutôt que de positionner ses
attributs.

La différence, à ce que j'ai constaté, setAttribute écrit l'attribut
dans la balise ce qui ne provoque pas forcément une nouvelle
interprétation de l'élément par le navigateur et une mise à jour de
ses propriétés ! L'utilisation de DOM 2 HTML positionne la propriété,
qui ne se reflète pas forcément dans l'arbre (accessible, par exemple,
avec innerHTML) mais qui est bien prise en compte pour un scripting
ultérieur.

Tout ce que je viens de dire est purement empirique et correspond
seulement à mes constatations et à l'interprétation que j'en ai faite.

--
Y.D.




Avatar
YD
J'abuse encore... car j'ai un autre souci. Le script démarre grâce à
<body onload="init()">. Toujours pour séparer le script du HTML,
j'aimerais écrire qqch du genre document.onload = init; dans le script.
Mais évidemment ça ne marche pas. Avec un getElementsByName("BODY") non
plus, du fait qu'avant <body> Javascript ne sait pas ce que c'est. Une
idée ?


onload est mis en attribut de body dans le HTML mais est une propriété de
l'objet window. On écrit donc (au choix) :

window.onload = init; (ou self.onload this.onload...)

ou plus simplement :
onload = init;

PS : une nouvelle question : un nouveau fil, et tu n'étais pas obligé de
conserver le texte du message précédent...

--
Y.D.

Avatar
Bobe
YD nous a dit le 03/03/2005 08:11:

En théorie, c'est strictement identique, donc si ça résoud le problème
de BRM comme cela semble être le cas, je veux bien qu'on m'explique le
pourquoi du comment.


En théorie, oui. En pratique, on a remarqué (cf. fils précédents sur ce
sujet) que dans le cas d'un élément HTML il valait mieux utiliser le
DOM 2 HTML plutôt que la syntaxe XML classique -- surtout pour IE.

Donc, quand un élément HTML est créé, il vaut mieux utiliser ses
propriétés (id, href, src, title...) plutôt que de positionner ses
attributs.



Certes, et dans le cas de MSIE, c'est effectivement pertinent dans
certains cas:

- pour l'attribut class, il ne rafraichit pas systématiquement la mise
en page si on ajoute/modifie l'attribut class via setAttribute() alors
qu'il le fait bien avec la propriété className
- pour l'attribut disabled, si on passe par setAttribute(), il faut le
faire après l'insertion dans le document sinon, il le repasse à sa
valeur par défaut (il me semble)

Il y a peut-être (sùrement) d'autres cas de ce genre pour MSIE. Mais je
n'ai jamais remarqué de problème avec Firefox à ce niveau, or BRM a dit
que cela ne marchait pas non plus sous Firefox. Je n'ai jamais constaté
de problème non plus pour attribuer un identifiant avec setAttribute()
sur MSIE.

--
Bobe (Aurélien Maille)
http://webnaute.net

"la vie d'un geek est un combat perpétuel contre l'imperfection"


Avatar
Do Re Mi chel La Si Do
Bonsoir !

Oui, innerText va bloquer avec FireFox. Mais le reste fonctionne aussi bien
avec I.E. qu'avec Firefox, et suffit à répondre à la question posée.

Donc, j'en avais trop fait. Voici la version qui ne fait QUE répondre à la
question posée :

document.body.innerHTML += "<div id='boite_aide'><div>";
var obj = document.getElementById("boite_aide");


Je suis d'accord avec le fait que ce n'est pas défini dans les normes ; mais
ça fonctionnera.


@-salutations
--
Michel Claveau
Avatar
Bobe
Do Re Mi chel La Si Do nous a dit le 03/03/2005 21:29:

document.body.innerHTML += "<div id='boite_aide'><div>";
var obj = document.getElementById("boite_aide");

Je suis d'accord avec le fait que ce n'est pas défini dans les normes ; mais
ça fonctionnera.



Non car innerHTML n'est pas normalisé... Donc des personnes qui
voudraient faire un moteur de script ne serait aucunement tenues de
l'implémenter (et qd bien même, ce truc n'est pas documenté de toute
façon, donc ça reviendrait à mimer le comportement des autres navigateurs).
Et dans la mesure où il y a un équivalent normalisé (voir le DOM Core),
il n'y a strictement aucune raison d'utiliser innerHTML.

var boite = document.createElement('div');
boite.setAttribute('id', 'boite_aide');
document.getElementsByTagName('body')[0].appendChild(boite);

ou plus court si HTML4 ou XHTML 1.0:

var boite = document.createElement('div');
boite.id = 'boite_aide';
document.body.appendChild(boite);

--
Bobe (Aurélien Maille)
http://webnaute.net

"la vie d'un geek est un combat perpétuel contre l'imperfection"

Avatar
Bobe
Do Re Mi chel La Si Do nous a dit le 03/03/2005 21:29:

Oui, innerText va bloquer avec FireFox. Mais le reste fonctionne aussi bien
avec I.E. qu'avec Firefox, et suffit à répondre à la question posée.



Pour info, et si ça interesse quelqu'un, l'équivalent standard de
innerText est textContent (DOM3 Core).
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent

--
Bobe (Aurélien Maille)
http://webnaute.net

"la vie d'un geek est un combat perpétuel contre l'imperfection"

Avatar
Do Re Mi chel La Si Do
Bonsoir !

Je suis désolé d'être en désaccord avec vous, sur la seule question de
savoir si ça fonctionne ou non. Je viens de tester avec :
- Internet Explorer 5.5 / NT OK
- Internet Explorer 6 sp1 / XP-SP1 OK
- Internet Explorer 6 sp1 / XP-SP2 OK
- Fire-Fox 1.0 / XP-SP2 OK
- Fire-Fox 1.0.1 / XP-SP1 OK

Donc, on peut dire que ça marche, dans la plupart des cas pratiques (même si
cela n'est pas normalisé).

Pour textContent, je répond dans l'autre fil.

Cordialement

Michel Claveau
Avatar
Do Re Mi chel La Si Do
(re)-Bonsoir !

Merci pour l'information sur textContent. C'est, effectivement,
intéressant.
Par contre, j'ai un problème :
- si, avec FireFox, ça fonctionne complètement
(création/affectation/visu),
- avec Internet Explorer, le texte n'est pas affiché (pas visualisé) ;
pourtant, il est bien présent dans le document (je peux l'afficher avec un
"alert", ou le voir, avec un analyseur de document externe).

Est-ce que cela arrive aussi chez d'autres installations ? Ou est-ce
seulement mes configs I.E. ? Autrement dit, est-ce un problème I.E., ou
est-ce mes configs ?

(re)-Bonne nuit

Michel Claveau
Avatar
BMR
Salut,

Très intéressant cet échange à propos de
setAttribute/objet.id/innerHTML. Bien que mes connaissances en JS ne
soit pas au niveau des vôtres, j'ai depuis longtemps un site d'aide en
Javascript. Et je me demande, d'un point de vue pédagogique, quelle est
la meilleure manière entre les 3. Personnellement, je pencherais pour la
première, car c'est plus standard, car apparemment utilisée par d'autres
langages que Javascript.

Bonne journée,

BMR
1 2 3