jQuery – Modifier des éléments

Modifier un attribut

Exemple: remplacer une image par une autre en changeant l’attribut src

HTML


<img id="img" src="https://michelpiallier.info/blog/ressources/fleurs/fleur1.jpg" alt="fleur1" width="150">
<button id="bt2">Fleur 2</button>
<button id="bt3">Fleur 3</button>
<button id="bt1">Fleur 1</button>



<img id="img" src="https://michelpiallier.info/blog/ressources/fleurs/fleur1.jpg" alt="fleur1" width="150">

<button id="bt2">Fleur 2</button>

<button id="bt3">Fleur 3</button>

<button id="bt1">Fleur 1</button>

Javascript


$("#bt2").on("click",function(){
		$("#img").attr("src","https://michelpiallier.info/blog/ressources/fleurs/fleur2.jpg");
})
$("#bt3").on("click",function(){
		$("#img").attr("src","https://michelpiallier.info/blog/ressources/fleurs/fleur3.jpg");
})
$("#bt1").on("click",function(){
		$("#img").attr("src","https://michelpiallier.info/blog/ressources/fleurs/fleur1.jpg");
})



$("#bt2").on("click",function(){

		$("#img").attr("src","https://michelpiallier.info/blog/ressources/fleurs/fleur2.jpg");

})

$("#bt3").on("click",function(){

		$("#img").attr("src","https://michelpiallier.info/blog/ressources/fleurs/fleur3.jpg");

})

$("#bt1").on("click",function(){

		$("#img").attr("src","https://michelpiallier.info/blog/ressources/fleurs/fleur1.jpg");

})

Jsfiddle

Publier 2 mai 2014 par Michel PIALLIER dans jQuery - Modifier des éléments Commentaires fermés

La fonction "html()"

On veut modifier dynamiquement le contenu d’un élément

HTML


<div id="contenu">
   <p>Le ciel est bleu aujourd'hui</p>
</div>
<input type="button" value="Changer le texte" onclick="changer_contenu()"/>

Javascript


function changer_contenu(){
   var div_contenu = $("#contenu");
   div_contenu.html("<h2>Le ciel est gris aujourd'hui</h2>");
}

Jsfiddle

Publier 9 mai 2018 par Michel PIALLIER dans jQuery - Créer des éléments Commentaires fermés

Charger jQuery


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Publier 15 novembre 2014 par Michel PIALLIER dans jQuery - Chargement Commentaires fermés

« Previous 1 2 3 4 5 6 Next »