Comment obtenir le texte d'une balise div en utilisant uniquement javascript (pas de jQuery) ?

Question

J'ai essayé mais le résultat est "undefined".

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

Existe-t-il un moyen d'obtenir la valeur en utilisant un simple Javascript sans jQuery ?

Answer 1

Vous voudrez probablement essayer textContent au lieu de innerHTML .

Étant donné que innerHTML retournera le contenu du DOM sous la forme d'un String et pas exclusivement le "texte" dans le div . C'est bien si vous savez que votre div ne contient que du texte mais ne convient pas à tous les cas d'utilisation. Pour ces cas, vous devrez probablement utiliser textContent au lieu de innerHTML

Par exemple, si l'on considère le balisage suivant :

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

Vous obtiendrez le résultat suivant :

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

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

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

Voir MDN pour plus de détails :

• textContent
• innerHTML

Answer 2

Porque textContent n'est pas pris en charge par IE8 et les versions antérieures, voici une solution de contournement :

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerText fonctionne dans IE.

Answer 3

Vous pouvez utiliser innerHTML (puis analyser le texte du HTML) ou utiliser innerText .

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTML y innerText est supporté par tous les navigateurs (à l'exception de FireFox < 44), notamment IE6 .

Answer 4

En fait, vous n'avez pas besoin d'appeler document.getElementById() pour avoir accès à votre div .

Vous pouvez utiliser ce object directement par id :

text = test.textContent || test.innerText;
alert(text);