L’un des éléments fondamentaux de la programmation web consiste à afficher des informations dynamiques dans une page HTML. Vous pouvez accomplir cela en utilisant JavaScript pour manipuler le contenu de votre page. Dans cet article, nous allons vous montrer comment afficher une variable JavaScript dans une page HTML de différentes manières.
document.write()
La méthode la plus simple pour afficher une variable JavaScript dans une page HTML est d’utiliser la fonction document.write()
. Cette fonction écrit du texte directement dans le document HTML à l’endroit où elle est appelée.
<!DOCTYPE html>
<html>
<head>
<title>Affichage de Variable JavaScript</title>
</head>
<body>
<h1>Affichage de Variable JavaScript</h1>
<script>
var maVariable = "Hello, monde !";
document.write(maVariable);
</script>
</body>
</html>
Dans cet exemple, la variable maVariable
contient la chaîne de caractères “Hello, monde !”, qui est ensuite affichée dans la page en utilisant document.write()
.
innerHTML
Une autre méthode courante pour afficher une variable JavaScript dans une page HTML est d’utiliser la propriété innerHTML
d’un élément HTML. Cette méthode offre plus de flexibilité en ciblant un élément spécifique pour afficher le contenu.
<!DOCTYPE html>
<html>
<head>
<title>Affichage de Variable JavaScript</title>
</head>
<body>
<h1>Affichage de Variable JavaScript</h1>
<p id="output"></p>
<script>
var maVariable = "Hello, monde !";
document.getElementById("output").innerHTML = maVariable;
</script>
</body>
</html>
Dans cet exemple, la variable maVariable
est affichée dans l’élément HTML avec l’ID “output”. La propriété innerHTML
de cet élément est utilisée pour définir le contenu de l’élément avec la valeur de la variable.
textContent
Si vous préférez manipuler uniquement le texte contenu dans un élément HTML sans interpréter le HTML, vous pouvez utiliser la propriété textContent
.
<!DOCTYPE html>
<html>
<head>
<title>Affichage de Variable JavaScript</title>
</head>
<body>
<h1>Affichage de Variable JavaScript</h1>
<p id="output"></p>
<script>
var maVariable = "Hello, monde !";
document.getElementById("output").textContent = maVariable;
</script>
</body>
</html>
Dans cet exemple, la variable maVariable
est affichée dans l’élément HTML avec l’ID “output” en utilisant textContent
.
console.log()
Parfois, vous pouvez avoir besoin d’afficher des variables à des fins de débogage. La fonction console.log()
est utile dans ce cas. Elle affiche le contenu de la variable dans la console du navigateur.
<!DOCTYPE html>
<html>
<head>
<title>Affichage de Variable JavaScript</title>
</head>
<body>
<h1>Affichage de Variable JavaScript</h1>
<script>
var maVariable = "Hello, monde !";
console.log(maVariable);
</script>
</body>
</html>
Dans cet exemple, la variable maVariable
est affichée dans la console du navigateur, ce qui est utile pour le débogage.
Afficher une variable JavaScript dans une page HTML est une tâche courante en développement web. Les méthodes que nous avons explorées, telles que document.write()
, innerHTML
, textContent
et console.log()
, vous permettent d’accomplir cette tâche de différentes manières, en fonction de vos besoins. Utilisez ces techniques pour dynamiser vos pages web et offrir une expérience utilisateur plus riche.
Ce guide vous aide à rédiger un QCM Analyse Financière structuré et pertinent sur l'analyse…
Le marketing de la mode est un domaine stratégique essentiel pour promouvoir une marque, une…
Dans le cadre de la gestion des entreprises, le Questionnaire à Choix Multiples (QCM) est…
Le plan de management de projet est un document essentiel qui décrit comment un projet…
Cette partie montre aux formateurs la méthode de création d'un QCM corrigé en gestion des…
Pour que Samsung puisse surpasser Apple, elle devrait continuer à renforcer ses avantages compétitifs tout…
This website uses cookies.