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.

Modifier contenu div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager