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;

Lebih banyak contoh di bawah ini

Definisi dan Penggunaan

Properti innerText_ menyetel atau mengembalikan konten teks dari suatu elemen

Perbedaan AntarainnerHTML, innerText dan textContent

Lihat di bawah

Sintaksis

Mengembalikan konten teks dari elemen atau node

Atur konten teks dari elemen atau node

Nilai properti

Nilai Pengembalian

Artikel 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

 Demo on innerHTML vs innerText
Hi Guys Welcome to EDUCBA
innerHTMLclass =
innerTextclass =
Press here
Press above button to see the working Process

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:


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

This is EDUCBA
This is EDUCBA
This is EDUCBA

Penjelasan

• Kode di atas mencetak konten di area Teks dengan properti innerText

Keluaran

Contoh #4

Kode

Penjelasan

• Cuplikan JavaScript di atas menunjukkan bahwa saat kita menekan tombol, hasil yang sesuai dengan teks dan tag HTML ditampilkan

Keluaran

tabel perbandingan innerText vs innerHTML

Mari kita bahas perbandingan teratas antara innerText vs innerHTML

Hello web developersShiv Om How you doing?

misalkan p = dokumen. getElementById('CourseInstructor');

menghibur. log (hal. teks dalam)

Keluaran

Halo pengembang web, Shiv Bagaimana kabarmu?

Hello web developers, Shiv Om How you doing?

misalkan p = dokumen. getElementById(' premium”>');

menghibur. log (hal. teks dalam)

Keluaran

”

Hello web developers Shiv How you doing?

“

Kesimpulan

Oleh karena itu, dalam artikel ini, kita telah melihat perbedaan antara inner Html dan innerText saat kita memanipulasi kode JavaScript. Artikel ini menyoroti perbandingan, dan juga, Anda akan mendapatkan gambaran tentang proses kerja saat Anda memilih konten menggunakan innerText dan innerHtml dalam kode JavaScript. Sebagai kesimpulan, layanan pengembangan web merender halaman web apa pun dan memperkenalkan konten baru ke aplikasi mereka memerlukan konsep dasar

Artikel yang Direkomendasikan

Ini adalah panduan untuk innerText vs innerHTML. Di sini kita masing-masing membahas perbedaan utama dengan infografis, tabel perbandingan, dan contoh. Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –

Apa itu teks dalam dalam HTML?

Haruskah saya menggunakan innerHTML atau innerText?

Apa yang bisa saya gunakan sebagai ganti innerText?

Apa perbedaan antara innerText dan textContent?