Texte de modification JavaScript
-
Modifier le texte d’un élément à l’aide de la propriété
textContenten JavaScript -
Modifier le texte d’un élément à l’aide de la fonction
createTextNode()en JavaScript
Ce tutoriel expliquera comment modifier le texte d’un élément à l’aide de la propriété textContent et de la fonction createTextNode() en JavaScript.
Modifier le texte d’un élément à l’aide de la propriété textContent en JavaScript
Si vous souhaitez remplacer l’ancien texte d’un élément par un nouveau texte, vous devez obtenir cet élément en utilisant son identifiant ou son nom de classe, puis vous pouvez remplacer l’ancien texte par le nouveau texte en utilisant la propriété textContent. Si aucun identifiant ou nom de classe n’est spécifié, vous pouvez utiliser l’attribut id ou class pour donner à l’élément un identifiant ou un nom de classe. Assurez-vous que l’ID ou le nom de classe est unique ; sinon, tout élément ayant le même identifiant sera également modifié. Par exemple, créons un élément de texte à l’aide de la balise span et modifions son texte à l’aide de la fonction textContent de JavaScript. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
document.getElementById("SpanID").textContent="New Text";
</script>
</body>
</html>
Production:
New Text
Le code JavaScript est placé à l’intérieur du fichier HTML dans le code ci-dessus, mais vous pouvez les séparer si vous le souhaitez. Vous pouvez également spécifier la condition sur laquelle le texte doit être modifié comme, en cliquant sur un bouton. Si vous ne souhaitez pas remplacer le texte mais ajouter du nouveau texte avec l’ancien texte, vous pouvez utiliser la méthode ci-dessous.
Modifier le texte d’un élément à l’aide de la fonction createTextNode() en JavaScript
Si vous souhaitez ajouter le nouveau texte avec l’ancien texte, vous devez obtenir cet élément en utilisant son identifiant ou son nom de classe, puis en utilisant la fonction createTextNode(), vous pouvez créer un nœud du nouveau texte et en utilisant le appendChild() vous pouvez ajouter le nouveau texte avec l’ancien texte. Si aucun identifiant ou nom de classe n’est spécifié, vous pouvez utiliser l’attribut id ou class pour donner à l’élément un identifiant ou un nom de classe. Assurez-vous que l’ID ou le nom de classe est unique ; sinon, tout élément ayant le même identifiant sera également modifié. Par exemple, créons un élément de texte à l’aide de la balise span et ajoutons son texte à l’aide de la fonction createTextNode() en JavaScript. Voir le code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
Myspan = document.getElementById("SpanID");
Mytxt = document.createTextNode("New text");
Myspan.appendChild(Mytxt);
</script>
</body>
</html>
Production:
Old Text New Text
Comme vous pouvez le voir dans la sortie, le nouveau texte est concaténé avec l’ancien texte.
