web-dev-qa-db-fra.com

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

J'ai essayé cela mais en montrant "non défini".

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

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

javascripthtml
68
agurchand

Vous voudrez probablement essayer textContent au lieu de innerHTML.

innerHTML étant donné retournera le contenu du DOM en tant que String et pas exclusivement le "texte" dans 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, en considérant 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:

127
dhar

textContent n'étant pas pris en charge dans 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.

6
oabarca

Vous pouvez utiliser innerHTML (puis analyser le texte à partir de HTML) ou utiliser innerText. 

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

console.log(textContentWithHTMLTags, textContent);

innerHTML et innerText sont pris en charge par tous les navigateurs (sauf FireFox <44), y compris IE6 .

0
Abdus