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

Dans votre tentative de récupérer le 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 les éléments d'entrée, et non avec les é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é du contenu du 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 textuel du 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érez le code HTML suivant :

  Some sample text.

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

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

htmlContent = node.innerHTML;
// htmlContent = "Some sample 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)