Modifier contenu div

Version imprimable

08/02/2007, 17h23
HaTnuX

Modifier contenu div
Bonjour à tous :)

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

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

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:

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.

08/02/2007, 17h49
HaTnuX

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 ?
08/02/2007, 17h52
HaTnuX

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

Code:

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

Et bien ça ne l'efface pas :?
Il faut rajouter quelque chose pour "actualiser" ?
08/02/2007, 17h59
Vanish
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:

1 2 3 4 function majtext(){ //le code au dessus }
et dans ton html tu rajoute

Code:

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

bonjour,

c'est bien compliqué votre truc :koi:

Utilise innerHTML :

Code:

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:

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.

08/02/2007, 23h39
Vanish

Effectivement je me complique la vie ^^ va falloir que je pense plus souvent à ce ptit hinnerhtml
09/02/2007, 09h19
HaTnuX

Merci beaucoup, ça marche super bien le innerHtml :D

Par contre avec ça on peut aussi changer la valeur du href ? :?
09/02/2007, 09h26
E.Bzz

Citation:

Envoyé par Auteur

c'est bien compliqué votre truc :koi:

Utilise innerHTML :

Arrgh !! :koi: (bis)

Les avis seraient donc pour le moins partagés :mrgreen:

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

A+
09/02/2007, 10h02
Auteur
Citation:

Envoyé par E.Bzz

Arrgh !! :koi: (bis)

Les avis seraient donc pour le moins partagés :mrgreen:

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:

1 2 document.getElementById("idLien").href = "http://www.developpez.com";
09/02/2007, 10h06
HaTnuX

Suffisait d'y pensé :oops:
Merci :D
09/02/2007, 10h31
E.Bzz

Citation:

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

A+
09/02/2007, 11h11
HaTnuX
C'est encore moi :oops:

J'ai ça :
Code:

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:

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 ! :D
09/02/2007, 11h23
E.Bzz

Citation:

Envoyé par E.Bzz

Reçu => "divergences" clarifiées :D

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+
09/02/2007, 11h39
HaTnuX

Tin mais je suis trop une loose :roll:

Merci :king:
09/02/2007, 14h02
Auteur
Citation:

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:

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

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:

1 2 3 document.getElementById("pg").innerHTML retourne coucou <b>tout le monde</b>
outerText : même chose que innerText (:question:)

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

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 :D ) :!:
et garde
innerHTML
09/02/2007, 14h10
E.Bzz

Citation:

Envoyé par Auteur

oublie innerText, outerText et outerHTML (d'ailleurs Firefox ne reconnait pas ces attributs :D ) :!:[/B]

C'est effectivement le meilleur argument pour innerHTML :)

Merci pour les précisions ...

A+