Comment obtenir le contenu texte d'un élément Div en utilisant du JavaScript simple ?

Obtention du contenu texte d'un élément Div à l'aide de JavaScript simple

Dans votre tentative de récupération du texte dans un div à l'aide de la propriété "value" , vous avez rencontré un problème où « undéfini » était renvoyé. Pour réussir à extraire le contenu du texte à l'aide de JavaScript pur, vous pouvez utiliser l'approche suivante :

La propriété "value" est principalement utilisée avec des éléments d'entrée, et non avec des éléments div. Pour accéder au contenu textuel d'un div, vous devez exploiter les propriétés "innerHTML" ou "textContent".

Utilisation de la propriété "innerHTML":

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}

Cette approche récupère l'intégralité contenu dans le div, y compris les balises HTML. Cependant, si votre div ne contient que du texte, cette méthode convient.

Vous pouvez également envisager d'utiliser la propriété "textContent" :

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}

La propriété "textContent" renvoie exclusivement le contenu du texte à l'intérieur le div, à l’exclusion des balises HTML. Cette option est particulièrement utile lorsqu'il s'agit de div pouvant contenir un contenu mixte.

Par exemple, considérons le code HTML suivant :

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

L'utilisation de la propriété "innerHTML" renverra ce qui suit :

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some <span class="foo">sample</span> text."

Cependant, l'utilisation de la propriété « textContent » donnera :

textContent = node.textContent;
// textContent = "Some sample text."

Pour plus de détails et des exemples d'utilisation, reportez-vous à la documentation complète fournie par MDN :

• [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
• [innerHTML](https://developer.mozilla.org /en-US/docs/Web/API/Element/innerHTML)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!