Atribut textContent DOM HTML Element

Definisi dan penggunaan

textContent Atribut menetapkan atau mengembalikan konten teks dari node yang ditentukan, serta semua turunannya.

Jika Anda mengatur textContent Atribut, akan menghapus semua anak dan digantikan dengan satu node teks yang mengandung string yang diberikan.

Petunjuk:Kadang-kadang, atribut ini dapat digunakan untuk menggantikan atribut nodeValue, tetapi ingat bahwa atribut ini akan mengembalikan teks semua anak.

Lihat pula:

Atribut innerText

Atribut innerHTML

Contoh

Contoh 1

Kembalikan konten teks elemen:

let text = element.textContent;

Coba sendiri

Contoh 2

Ubah konten teks elemen <p> dengan id="demo":

element.textContent = "Saya telah berubah!";

Coba sendiri

Contoh 3

Mengambil seluruh konten teks elemen <ul> dengan id="myList":

let text = document.getElementById("myList").textContent;

Coba sendiri

Sintaksis

Kembalikan konten teks node:

element.textContent

atau

node.textContent

Atur konten teks node:

element.textContent = text
node.textContent = text

Nilai atribut

Nilai Deskripsi
text Konten teks elemen atau node.

Nilai yang dikembalikan

Tipe Deskripsi
String

Konten teks elemen dan semua turunannya.

Jika elemen adalah document, document type, atau notation, maka mengembalikan null.

Perbedaan antara innerHTML, innerText, dan textContent

Properti innerText mengembalikan:

Hanya mengembalikan konten teks elemen dan semua turunannya, tanpa teks tersembunyi CSS, spasi dan tag, kecuali elemen <script> dan <style>.

Properti innerHTML mengembalikan:

Konten teks elemen, termasuk semua spasi dan tag HTML internal.

Properti textContent mengembalikan:

Konten teks elemen dan semua turunannya, termasuk spasi dan teks tersembunyi CSS, tetapi tanpa tag.

Contoh HTML

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

Contoh JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Coba sendiri

Dalam contoh di atas:

Properti innerText mengembalikan:

Elemen ini memiliki spasi ekstra dan mengandung elemen span.

Properti innerHTML mengembalikan:

   Elemen ini memiliki spasi ekstra dan mengandung <span>elemen span</span>.

Properti textContent mengembalikan:

   Elemen ini memiliki spasi ekstra dan mengandung elemen span.

Dukungan peramban

element.textContent Adalah fitur DOM Level 3 (2004).

Seluruh peramban mendukungnya penuhnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan