Modifier contenu div

**HaTnuX** · 08/02/2007, 17h23

Bonjour à tous

Alors voilà j'ai tout simplement ça dans ma page web :

Code :

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

1
2
3
4
<div id="second">
    <div class="thumb"><img src="Images/square.gif"/></div>
    <div class="elem"><a href=""> TEXTE</a></div>
</div>

Et après un evènement (l'appui sur un bouton par exemple), je voudrais changer le contenu de mon div elem, donc en gros changer le TEXTE.
C'est possible ?

Merci beaucoup

**Vanish** · 08/02/2007, 17h39

Moi dans ces cas là j'enleve la balise juste au desssus (et donc le texte a l'interrieur, puis je recreer la balise et le nouveau texte.
Et le mieux pour ça c'est de mettre un id à ton div.
donc normalement

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
//suppression de la balise <a> et donc du texte
     document.getElementById("elem").removeChild.firstChild; 
//creation de la nouvelle balise <a> et de son attribut
     var newa = document.createElement("a");
     var newhref= document.createAttribut("href");
     newhref.nodeValue=("");
//on lit l'attribut à la balise
     newa.setAttributeNode(newhref);
//on met ça à sa place
     document.getElementById("elem").appendChild(newa);
//on cree le text et on l'envoi
     var newtext = document.createTextNode("Texte");
document.getElementById("elem").getElementsByTagName("a")[0].appendChild(newtext);

sinon tu peut aussi mettre un name à ton "elem" si tu veux pas d'un Id, faut juste connaitre sa position.

**HaTnuX** · 08/02/2007, 17h49

Merci beaucoup de ton aide !

Ton idée me parait très intéressante, mais là ça marche pas :/
Je veux bien rajouter des id, mais ça changerais quoi par rapport à ton code ?

**HaTnuX** · 08/02/2007, 17h52

Au fait, je remarque que si je fais juste un :

Code :

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

document.getElementById('title').removeChild.firstChild;

Et bien ça ne l'efface pas

Il faut rajouter quelque chose pour "actualiser" ?

**Vanish** · 08/02/2007, 17h59

mon code utilise getElmentById("elem") donc si tu fait <div class="elem"> ça marche pas, il faut <div id="elem">

et ça c donc à mettre dans une fonction genre

Code :

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

1
2
3
4
 
function majtext(){
    //le code au dessus
}

et dans ton html tu rajoute

Code :

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

<input type="button" value="Changer text" onclick="majtext()" />

removeChild supprime un noeud enfant de celui que tu indique <div id="parent"><div id="enfant></div></div> ici "enfant" est a l'interieur de "parent"

**Auteur** · 08/02/2007, 18h22

bonjour,

c'est bien compliqué votre truc

Utilise innerHTML :

Code html :

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

1
2
3
4
5
6
7
 
<div id="second">
    <div class="thumb"><img src="Images/square.gif"/></div>
    <div class="elem"><a href="" id="idLien"> TEXTE</a></div>
</div>
 
<input type="button" value="Bouton" onclick="document.getElementById('idLien').innerHTML = 'Nouveau texte'">

j'ai ajouté un id sur le lien puis un document.getElementById("idLien").innerHTML fait le reste.

Sinon si tu vexu supprimer la balise de lien :

Code html :

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
26
27
28
29
30
31
32
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function simpleTexte()
{
 var elmtDiv = document.getElementById("monDiv");
 elmtDiv.removeChild(document.getElementById("idLien"));
 
 elmtDiv.innerHTML = "simple texte";
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="second">
    <div class="thumb"><img src="Images/square.gif"/></div>
    <div class="elem" id="monDiv"><a href="" id="idLien"> TEXTE</a></div>
</div>
 
<input type="button" value="Bouton" id="idButton" onclick="simpleTexte()">
 
</body>
 
</html>

Lors du clic sur le bouton, le lien deviendra un simple texte.

**Vanish** · 08/02/2007, 23h39

Effectivement je me complique la vie ^^ va falloir que je pense plus souvent à ce ptit hinnerhtml

**HaTnuX** · 09/02/2007, 09h19

Merci beaucoup, ça marche super bien le innerHtml

Par contre avec ça on peut aussi changer la valeur du href ?

**E.Bzz** · 09/02/2007, 09h26

Envoyé par Auteur

c'est bien compliqué votre truc

Utilise innerHTML :

Arrgh !!

(bis)

Les avis seraient donc pour le moins partagés

D'un côté, ça me rassure : je l'aime bien moi, ce innerHTML

A+

**Auteur** · 09/02/2007, 10h02

Envoyé par E.Bzz

Arrgh !!

(bis)

Les avis seraient donc pour le moins partagés

D'un côté, ça me rassure : je l'aime bien moi, ce innerHTML

A+

E.Bzz : j'utilise innerHTML uniquement pour modifier le contenu d'une balise, c'est à dire du texte, pas pour ajouter ou supprimer un élément

Le second code que j'ai fourni supprime le lien en utilisant les méthodes du DOM.

HaTnuX : pour modifier le href :

Code javascript :

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

1
2
 
document.getElementById("idLien").href = "http://www.developpez.com";

**HaTnuX** · 09/02/2007, 10h06

Suffisait d'y pensé

Merci

**E.Bzz** · 09/02/2007, 10h31

Envoyé par Auteur

E.Bzz : j'utilise innerHTML uniquement pour modifier le contenu d'une balise, c'est à dire du texte, pas pour ajouter ou supprimer un élément

Reçu => "divergences" clarifiées

A+

**HaTnuX** · 09/02/2007, 11h11

C'est encore moi

J'ai ça :

Code :

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

1
2
3
4
<div id="second">
    <div class="elem"><a href="" id="second1"> TEXTE1</a></div>
    <div class="elem"><a href="" id="second2"> TEXTE2</a></div>
</div>

Je voudrais juste inversé les texte, donc je fais :

Code :

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

document.getElementById('second1').innerHTML = window.document.getElementById('second2');

Mais il me retourne la valeur du href, et si je rajoute value à la fin, il me retourne undefined

y a moyen de récupérer TEXTE1 ?

Encore merci !

**E.Bzz** · 09/02/2007, 11h23

Envoyé par E.Bzz

Reçu => "divergences" clarifiées

Mais du coup quelle est l'avantage par rapport à innertext ?

@ HaTnuX > et si tu ajoutes .innerHTML au lieu de .value

(ou innertext, en fonction de la réponse de Auteur)

A+

**HaTnuX** · 09/02/2007, 11h39

Tin mais je suis trop une loose

Merci

**Auteur** · 09/02/2007, 14h02

Envoyé par E.Bzz

Mais du coup quelle est l'avantage par rapport à innertext ?

@ HaTnuX > et si tu ajoutes .innerHTML au lieu de .value

(ou innertext, en fonction de la réponse de Auteur)

A+

exemple :

Code html :

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

<p id="pg">coucou <b>tout le monde</b></p>

innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte (supprime toutes la balises contenues dans le texte récupéré).

Code :

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

1
2
3
document.getElementById("pg").innerText 
retourne
 coucou tout le monde

innerHTML : récupère le contenu entre deux balises avec formatage (laisse les éventuelles balises contenues dans le texte).

Code :

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

1
2
3
document.getElementById("pg").innerHTML 
retourne
 coucou <b>tout le monde</b>

outerText : même chose que innerText (

)

outerHTML : même chose que innerHTML mais prend également les balises qui encadrent le texte

Code :

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

1
2
3
document.getElementById("pg").outerHTML 
retourne
 <p id="pg">coucou <b>tout le monde</b></p>

Maintenant un conseil :
oublie innerText, outerText et outerHTML (d'ailleurs Firefox ne reconnait pas ces attributs

)

et garde
innerHTML

**E.Bzz** · 09/02/2007, 14h10

Envoyé par Auteur

oublie innerText, outerText et outerHTML (d'ailleurs Firefox ne reconnait pas ces attributs

)

[/B]

C'est effectivement le meilleur argument pour innerHTML

Merci pour les précisions ...

A+

Modifier contenu div

JavaScript

Discussions similaires

Partager

Partager