Discussion :

[bubulemaster]

Bonjour,

j'ai une balise HTML :

Code :

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

<span id='idMaBalise'></span>

En fonction de ce que l'utilisateur tape dans une balise input, cette balise span est modifiée.

Le problème c'est que si la balise est vide, le code suivant ne fonctionne pas que ce soit sous IE, FireFox ou Chrome (sinon ça fonctionne) :

Code :

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

1
2
3
4
5
6
7
function remplacerContenu(idDomObjet, contenu) {
    var donnees = document.getElementById(idDomObjet).firstChild ;
    // La balise a une donnees et c'est la balise d'origine du HTML
    var longueurDonnees = donnees.length ;
 
    donnees.replaceData(0, longueurDonnees, contenu) ;
}

donc j'ai complèté :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function remplacerContenu(idDomObjet, contenu) {
    var donnees = document.getElementById(idDomObjet).firstChild ;
 
    // Si la balise est vide donnees est undefined
    if (donnees) {
        // La balise a une donnees et c'est la balise d'origine du HTML
        var longueurDonnees = donnees.length ;
 
        donnees.replaceData(0, longueurDonnees, contenu) ;
    } else {
        // Creer un nouveau noeud
        var nouveauFils = document.createElement('span') ;
 
        var nouveauTexte = document.createTextNode(contenu) ;
 
        nouveauFils.appendChild(nouveauTexte) ;
 
        document.getElementById(idDomObjet).replaceChild(nouveauFils, donnees) ;
    }
}

Ca marche à la première modification, mais à la deuxième non, car donnees length est null.
En effet, j'ai remarqué que si la n'est pas vide la première fois on a la propriété length.
si on créer des balise dynamiquement on a pas length
Donc, j'ai ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function remplacerContenu(idDomObjet, contenu) {
    var donnees = document.getElementById(idDomObjet).firstChild ;   
 
    // Si la balise est vide donnees est undefined
    if (donnees && donnees.length) {
        // La balise a une donnees et c'est la balise d'origine du HTML
        var longueurDonnees = donnees.length ;
 
        donnees.replaceData(0, longueurDonnees, contenu) ;
    } else {
        // Creer un nouveau noeud
        var nouveauFils = document.createElement('span') ;
 
        var nouveauTexte = document.createTextNode(contenu) ;
 
        nouveauFils.appendChild(nouveauTexte) ;
 
        // Si donnees != undefined c'est qu'on a deja cree le noeud
        if (donnees) {
            document.getElementById(idDomObjet).replaceChild(nouveauFils, donnees) ;
        } else {
            document.getElementById(idDomObjet).appendChild(nouveauFils) ;
        }
    }
}

Ma question est pourquoi on a pas length et pourquoi si on modifie la propriété nodeValue, ça ne fonctionne pas non plus ?

Merci

[SpaceFrog]

peut être un début d'explication par ici
http://javascript.developpez.com/faq...M#DOMIEFirefox

ton firstchild ne pointe pas sur l'élément auquel tu t'attends ...

[bubulemaster]

Merci.

J'avais lu la FAQ et l'article associé.

Normalement, je ne devrais pas avoir le problème puisque je fais un getElementById.

D'autant que c'est le noeud que j'ajoute qui n'a pas de length.
Il suffit de regarder directement les propriétés après l'avoir créé.

[Bovino]

Salut,
En fonction de ce que contient ta variable contenu, ne serait-il pas plus simple d'utiliser un banal innerHTML

Code :

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

1
2
3
function remplacerContenu(idDomObjet, contenu) {
    document.getElementById(idDomObjet).innerHTML = contenu;
}

[SpaceFrog]

heu ... oui tu fais bein un getElementById ...
mais tu appelles sont firstChild

[Bovino]

Au passage :

Ma question est pourquoi on a pas length

Ben parce que la longueur d'un noeud du DOM n'a aucun sens en soit

[bubulemaster]

Bonjour,

merci de vos réponse. Effectivement, tard hier soir j'ai compris mon erreur. Voici la correction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function remplacerContenu(idDomObjet, contenu) {
    var donnees = document.getElementById(idDomObjet).firstChild ;
 
    // Si la balise est vide donnees est undefined
    if (donnees && donnees.length) {
        // La balise a une donnees et c'est la balise d'origine du HTML
        var longueurDonnees = donnees.length ;
 
        donnees.replaceData(0, longueurDonnees, contenu) ;      
    } else {
        // Creer un nouveau texte
        var nouveauTexte = document.createTextNode(contenu) ;
 
        document.getElementById(idDomObjet).appendChild(nouveauTexte) ;
    }
}

Et bien sur ne pas oublier d'ajouter ce qui est dit dans la FAQ.

Merci à tous