Remplacer le contenu d'une balise

Version imprimable

Bonjour,

j'ai une balise HTML :

Code:

<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:

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:

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:

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

13/08/2009, 11h33
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 ...
13/08/2009, 16h13
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éé.
13/08/2009, 16h40
Bovino
Salut,
En fonction de ce que contient ta variable contenu, ne serait-il pas plus simple d'utiliser un banal innerHTML :?
Code:

1 2 3 function remplacerContenu(idDomObjet, contenu) { document.getElementById(idDomObjet).innerHTML = contenu; }
13/08/2009, 16h56
SpaceFrog

heu ... oui tu fais bein un getElementById ...
mais tu appelles sont firstChild :roll:
13/08/2009, 17h00
Bovino

Au passage :

Citation:

Envoyé par bubulemaster

Ma question est pourquoi on a pas length

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

Bonjour,

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

Code:

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