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

92

J'ai essayé ceci mais montrant "indéfini".

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 Please!

agurchand
la source

Réponses:

162

Vous voudrez probablement essayer textContentau lieu de innerHTML.

Donné innerHTMLrenverra le contenu DOM sous forme de String"texte" et non exclusivement dans le fichier div. C'est bien si vous savez que votre divne contient que du texte mais ne convient pas dans tous les cas d'utilisation. Dans ces cas, vous devrez probablement utiliser à la textContentplace deinnerHTML

Par exemple, en tenant compte du 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:

dhar
la source
.textContentn'est pas pris en charge dans IE8 et les versions antérieures, ce qui le rend un peu difficile à utiliser.
Blender
2
Vrai. Indead, innerHTMLne renvoie pas uniquement le contenu du texte comme demandé dans la question. .textContent
J'implémenterais
4
Bien qu'il s'agisse d'une question plus ancienne, .textContent est la réponse la plus appropriée pour le monde d'aujourd'hui.
Donovan
Cela m'aide beaucoup plus. Merci beaucoup.
LogoS
9

Étant donné qu'il textContentn'est 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.

oabarca
la source
0

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);

innerHTMLet innerTextest pris en charge par tous les navigateurs (sauf FireFox <44), y compris IE6 .

Abdus
la source
0

En fait, vous n'avez pas besoin d'appeler la document.getElementById()fonction pour accéder à votre div.

Vous pouvez l'utiliser objectdirectement en id:

text = test.textContent || test.innerText;
alert(text);
Nick Wynther
la source