Modifier le contenu d'un div avec javascript

Soyez le premier à donner votre avis sur cette source.

Vue 8 244 fois - Téléchargée 1 641 fois

Description

Pour les débutants en Javascript, exemple d'un script à plusieurs arguments permettant de modifier facilement le contenu d'un Div et d'ajouter ou supprimer des images d'illustration. On peut aussi modifier la position des images en fonction du texte à illustrer. L'avantage de cette méthode est de pouvoir afficher de nombreux textes différents en évitant de charger chaque fois une autre page HTML ce qui est plus souple et plus rapide.

Conclusion :


Vous pouvez voir ce script en action sur mon site www.aidejlr.be avant de le télécharger (pages Logiciels,Internet et utiles).
Le nombre de Divs est ici de 4, mais on peut en ajouter autant qu'on veut de même que pour les images.
Toutes les explications utiles sont dans le JS et le HTML.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
23
Date d'inscription
dimanche 11 octobre 2009
Statut
Membre
Dernière intervention
26 mars 2011

Eric,

Merçi beaucoup du renseignement, je ne manquerai pas de suivre ton conseil.

Jacques
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Jacques,

Si tu veux trouver des exemples de Javascript contemporain, le plus simple est de regarder les tutoriaux de librairies comme PrototypeJS ou JQuery.

En effet, de nos jours plus personne ne fait du Javascript "de base" sauf pour certains projets particuliers.

Le gros avantage de ces librairies est de se charger de l'interopérabilité entre les différents navigateurs, tout en offrant des fonctions de haut niveau pour gérer les cas les plus courants.

Par exemple, avec PrototypeJS pour modifier le contenu d'une div, ça donnerait ca :



<script type="text/javascript>
$("maDiv").update("Je suis un contenu dynamique !");
</script>

Si tu parles anglais, tu peux aussi t'inscrire aux mailing lists d'aide à Javascript. Même si tu ne postes pas de messages, cést très instructif de lire les problèmes rencontrés par les autres, et les solutions proposées.

Eric
Messages postés
23
Date d'inscription
dimanche 11 octobre 2009
Statut
Membre
Dernière intervention
26 mars 2011

Alain,
Apres examen à tête reposée, il est bien évident que mon code bien que fonctionnant tres bien, contenait beaucoup de globales totalement inutiles puisqu'il n'y a ici qu'une seule fonction ce qui n'était pas le cas dans le script original.
Tout cela est maintenant rectifié et beaucoup plus clair.
J'ai toujours travaillé très vite mais je n'ai plus l'âge et dorénavent je prendrai le temps qu'il faudra.
Merçi pour les conseils et les remarques, il n'est jamais trop tard pour apprendre.
Messages postés
23
Date d'inscription
dimanche 11 octobre 2009
Statut
Membre
Dernière intervention
26 mars 2011

Ah encore une chose, j'ai corrigé 2 erreurs de
manquants dans le code html.
Copier/coller ça va plus vite mais on peut se tromper et comme l'affichage était bon je ne l'ai pas vu.
Maintenant c'est W3C nickel !
Messages postés
23
Date d'inscription
dimanche 11 octobre 2009
Statut
Membre
Dernière intervention
26 mars 2011

J'ai supprimé la fonction getElement pour vous contenter
Afficher les 23 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.