Bagaimana bisa mendapatkan teks dari tag div hanya menggunakan javascript (tanpa jQuery)

92

Saya mencoba ini tetapi menunjukkan "tidak ditentukan".

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

Apakah ada cara untuk mendapatkan nilai menggunakan Javascript sederhana no jQuery Please!

agurchand
sumber

Jawaban:

162

Anda mungkin ingin mencoba textContentdaripada innerHTML.

Diberikan innerHTMLakan mengembalikan konten DOM sebagai Stringdan tidak secara eksklusif "teks" di div. Tidak apa-apa jika Anda tahu bahwa Anda divhanya berisi teks tetapi tidak cocok untuk setiap kasus penggunaan. Untuk kasus-kasus, Anda mungkin harus menggunakan textContentbukannyainnerHTML

Misalnya, dengan mempertimbangkan markup berikut:

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

Anda akan mendapatkan hasil sebagai berikut:

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

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

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

Lihat MDN untuk lebih jelasnya:

dhar
sumber
.textContenttidak didukung di IE8 dan yang lebih rendah, yang membuatnya agak sulit untuk digunakan.
Blender
2
Benar. Indead, innerHTMLjangan hanya mengembalikan konten teks seperti yang diminta dalam pertanyaan. Saya akan menerapkan solusi berdasarkan .textContentdeteksi fitur dengan fallback untuk <IE9
dhar
4
Meskipun pertanyaan lama, .textContent adalah jawaban yang lebih tepat untuk dunia saat ini.
Donovan
Ini membantu saya lebih banyak. Terima kasih banyak.
LogoS
9

Karena textContenttidak didukung di IE8 dan yang lebih lama, berikut ini solusinya:

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

innerText bekerja di IE.

oabarca
sumber
0

Anda dapat menggunakan innerHTML(lalu mengurai teks dari HTML) atau menggunakan innerText.

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

console.log(textContentWithHTMLTags, textContent);

innerHTMLdan innerTextdidukung oleh semua browser (kecuali FireFox <44) termasuk IE6 .

Abdus
sumber
0

Sebenarnya Anda tidak perlu memanggil document.getElementById()fungsi untuk mendapatkan akses ke file div.

Anda dapat menggunakan ini objectsecara langsung dengan id:

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