JavaScript et jQuery: Remplacer le contenu d'un élément à l'aide de innerHTML

Dans ce petit mini tutoriel, je veux vous montrer comment remplacer l'intérieur d'un élément en HTML par JavaScript et jQuery par tout autre nouveau contenu.

Supposons que nous ayons un élément, par exemple ce DIV ici, que nous avons nommé avec l'id "test":

<div id="test">Ancien contenu</div>

Nous voulons maintenant remplacer le contenu de cet élément par la chaîne "Hello World". Pour cela, nous souhaitons examiner une solution avec JavaScript et une autre solution avec jQuery.

La solution JavaScript

document.getElementById("test").innerHTML = "Hello World";

En JavaScript, nous pouvons utiliser la fonction getElementById() pour sélectionner notre élément et remplacer son contenu par "Hello World" comme il est montré dans l'exemple.

La solution jQuery

$("#test").html("Hello World");

Ce sera plus facile si nous utilisons jQuery. Ici il suffit de sélectionner notre élément avec $("#test") et d'utiliser la fonction html() pour changer le innerHTML de l'élément.