Properti innerText
_ dari antarmuka HTMLElement
mewakili konten teks yang dirender dari sebuah node dan turunannya
Sebagai pengambil, ini mendekati teks yang akan didapatkan pengguna jika mereka menyorot konten elemen dengan kursor lalu menyalinnya ke papan klip. Sebagai penyetel, ini akan menggantikan anak elemen dengan nilai yang diberikan, mengubah jeda baris apa pun menjadi elemen
Catatan. innerText
mudah bingung dengan Node.textContent
, tetapi ada perbedaan penting antara keduanya. Pada dasarnya, innerText
_ mengetahui tampilan teks yang diberikan, sementara textContent
tidak
String yang mewakili konten teks yang dirender dari suatu elemen
Jika elemen itu sendiri tidak [misalnya, terlepas dari dokumen atau tersembunyi dari tampilan], nilai yang dikembalikan sama dengan properti Node.textContent
Peringatan. Menyetel innerText
_ pada sebuah node akan menghapus semua anak node dan menggantinya dengan satu node teks dengan nilai string yang diberikan
Contoh ini membandingkan innerText
dengan Node.textContent
. Perhatikan bagaimana innerText
menyadari hal-hal seperti
elemen, dan mengabaikan elemen tersembunyi
Anda akan melihat tiga properti saat mengerjakan DOM i. dan innerText, innerHTML, textContent. Anda harus mengetahui cara mengubah teks atau HTML yang muncul di halaman agar situs Anda lebih interaktif. Semua properti innerText, innerHTML, dan textContent memungkinkan Anda mengakses dan mengubah konten tag. Di situlah atribut innerText dan innerHTML, textContent HTML masuk. Orang terkadang bingung dengan ketiga sifat ini. Saatnya untuk menghapus semua kebingungan dan mengetahui di mana menggunakan properti ini
Contoh
Dapatkan teks bagian dalam suatu elemen
biarkan teks = elemen. innerText;
Cobalah sendiri "Lebih banyak contoh di bawah ini
Definisi dan Penggunaan
Properti innerText
_ menyetel atau mengembalikan konten teks dari suatu elemen
Perbedaan Antara
innerHTML, innerText dan textContent
Lihat di bawah
Sintaksis
Mengembalikan konten teks dari elemen atau node
atauAtur konten teks dari elemen atau node
atauNilai properti
PropertyDescriptiontextKonten teks dari elemenNilai Pengembalian
TypeDescriptionStringKonten teks dari elemen dan semua turunannya, kecuali untukArtikel berikut memberikan garis besar untuk innerText vs innerHTML. innerText dan innerHTML adalah properti JavaScript. properti innerText mengembalikan teks biasa dan menghapus spasi, dan memiliki kompatibilitas. innerHtml menampilkan konten antar label, termasuk konten teks dan tag dan didukung oleh semua browser. Html adalah bahasa markup yang digunakan untuk pengembangan halaman web. innerHtml ini akan disajikan untuk mengganti tag dan konten yang dipilih
Paket Pengembangan Perangkat Lunak Semua dalam Satu[600+ Kursus, 50+ proyek]
Harga
Lihat Kursus
600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 [85.754 peringkat]
Perbandingan Head to Head Antara innerText vs innerHTML [Infografis]
Di bawah ini adalah 9 perbedaan teratas antara innerText vs innerHTML
Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda
Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya
Perbedaan Kunci Antara innerText vs innerHTML
Mari kita bahas beberapa perbedaan utama antara innerText vs innerHTML
- Perbedaan ditangani di mana teks ditangani. innerText sangat mirip dengan textContent. Namun, innerText menyisipkan string sebagai masukan ke elemen sementara innerHTML menjalankan dan mengeksekusi elemen sebagai konten HTML
- innerHtml berfungsi dengan teks kaya HTML, dan mereka tidak melakukan penyandian dan dekode teks secara otomatis. innerText merender konten teks sementara HTML bagian dalam mem-parsing entitas HTML di dalam elemen
- innerText tidak berfungsi di semua browser karena tidak valid di Firefox dan kemudian ditambahkan ke Firefox v45
- innerHtml rentan terhadap serangan XSS, tetapi tidak demikian halnya di InnerText. Alih-alih, menggunakan inner Html menyebabkan browser web mem-parse ulang semua elemen DOM yang tersedia di dalam kode HTML. Dengan kata lain, membuat elemen baru dan menambahkan DOM memberikan kinerja yang lebih baik
- innerText menerapkan representasi sadar gaya dan memberikan transformasi gaya. Untuk semua maksud, innerText secara signifikan lebih lambat. Untuk kesadaran gaya, kita bisa menggunakan inner Html sebagai gantinya
- innerText mencari beberapa informasi dari sistem tata letak untuk menjelaskan bagaimana teks ditampilkan kepada pengguna. Ini membuat kinerja aplikasi menjauh dari rel
Contoh innerText vs innerHTML
Diberikan di bawah ini adalah contoh innerText vs innerHTML
Jadi di sini, kita perlu mengekstrak teks dari elemen HTML. Ini adalah contoh cepat yang dapat kami coba di editor mana pun yang dipilih
Contoh 1
Kode
Javascript Properties
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.output,
.start1 {
font-size: 16px;
font-weight: 400;
color: blue;
}
Demo on innerHTML vs innerText
Hi Guys Welcome to EDUCBA
innerHTMLclass =
innerTextclass =
Press here
Press above button to see the working Process
let Bn = document.querySelector[".Click_Btn"];
let res = document.querySelectorAll[".output"];
let startel = document.querySelector[".start1"];
let x;
BtnEle.addEventListener["click", [] => {
res[0].innerHTMLclass += startel.innerHTMLclass;
res[1].innerHTMLclass +=startel.innerTextclass;
}];
Penjelasan
- Dalam kode di atas, kita perlu mengekstrak bagian teks satu per satu dan, di kelas lain, juga tag HTML. Jadi kami telah menulis beberapa kode JavaScript untuk mengambil proses kerja
Keluaran
Contoh #2
Kode
Source element:
#original { color: blue; } #text { text-transform: lowercase; }
Easiest way
to learn the course
is followed
below.
No Content
Output of TextContent Property:
...
Output of innerText:
...
_js
const original = document.getElementById["original"];
const textdemo = document.getElementById["textdemo"];
const innerTextdemo = document.getElementById["innerTextdemo"];
textdemo.value = original.textContent;
innerTextdemo.value = original.innerText;
Contoh #3
Kode
Sample Document
This is EDUCBA
This is EDUCBA
This is EDUCBA
var b1 = document.getElementById["b1"];
console.log[ss1];
Penjelasan
- Kode di atas mencetak konten di area Teks dengan properti innerText
Keluaran
Contoh #4
Kode