Obtenez le texte d'un élément HTML à l'aide de JavaScript
Parfois, les développeurs doivent définir ou obtenir le texte d'un élément HTML pour effectuer diverses tâches. Pour obtenir le texte d'un élément, utilisez le «continent textuel”Propriétés avec des propriétés innerhtml et internet. L'élément.TextContent est une fonction DOM Level 3 qui est entièrement prise en charge dans tous les navigateurs.
Cet article expliquera la procédure pour obtenir le texte d'un élément à l'aide de JavaScript.
Comment obtenir le texte d'un élément HTML à l'aide de JavaScript?
Utilisez les approches suivantes pour obtenir le texte d'un élément à l'aide de JavaScript:
- Propriété TextContent avec propriété innerhtml
- propriété TextContent avec propriété InnerText
Méthode 1: Obtenez le texte d'un élément HTML à l'aide d'une propriété TextContent avec une propriété innerHTML
Le contenu texte du nœud spécifié et de ses descendants peut être défini ou renvoyé à l'aide du «continent textuel" attribut. Il renvoie une concaténation du contenu texte de chaque nœud enfant. Cependant, une chaîne vide est renvoyée en sortie au cas où l'élément est vide.
Syntaxe
Suivez la syntaxe donnée pour utiliser le «continent textuel»Propriété pour obtenir le texte de l'élément HTML:
élément.continent textuel
Exemple
Dans l'exemple suivant, nous créerons une liste non ordonnée avec des éléments enfants
- Html
- CSS
- Javascrip
- Nœud js
- Réagir
Créez un bouton et attachez un "sur clic«Événement qui déclenchera le« défini »getText ()" méthode:
Créez un paragraphe en lui attribuant un ID, où la sortie sera affichée:
Après avoir exécuté le code HTML ci-dessus, la sortie sera la suivante:
Maintenant, dans un fichier javascript, obtenez d'abord l'élément en utilisant le «getElementByid ()«Méthode puis récupérer son texte à l'aide du«continent textuel«Propriété et stockez-le dans une variable»texte". Ensuite, appelez le «innerhtml»Propriété qui imprimera le texte sur le champ spécifique en une seule ligne avec des espaces.
fonction getText ()
var text = document.getElementByid ("liste").TextContent;
document.getElementByid ("texte").innerHtml = texte;
La sortie correspondante sera la suivante:
Voyons la deuxième méthode!
Méthode 2: Obtenez le texte d'un élément HTML à l'aide d'une propriété TextContent avec une propriété InnerText
Pour obtenir le texte dans le même format que celui indiqué sur une page Web, comme sous un formulaire de liste, utilisez le "texte de texte»Propriété avec le«continent textuel" propriété.
Syntaxe
La syntaxe suivante est utilisée pour la propriété InnerText:
élément.texte de texte
Exemple
Dans le fichier JavaScript, définissez d'abord une fonction "getText ()«Cela se déclenchera sur le bouton Cliquez pour obtenir le contenu texte de l'élément non ordonné:
fonction getText ()
var text = document.getElementByid ("liste").TextContent;
document.getElementByid ("texte").innerText = text;
Sortir
Le GIF ci-dessus signifie que le «texte de texte»Propriété avec le«continent textuel»La propriété obtient le texte d'un élément HTML dans le format de liste.
Conclusion
Pour obtenir le texte d'un élément HTML, utilisez le «continent textuel»Propriété avec le«innerhtml" et "texte de texte" propriétés. L'innerhtml imprimera le texte d'un élément dans un ordre en ligne, tandis que le texte inner imprime le texte dans le même format. Cet article a expliqué la procédure pour obtenir le texte d'un élément à l'aide de JavaScript.