Mengatur Konten Teks HTML Menggunakan innerText DOM
Properti innerText DOM pada HTML digunakan untuk mengatur atau mengembalikan konten teks dari node spesifik dan juga turunannya. Properti innerText sangat sama dengan properti konten teks, tetapi mengembalikan nilai dari segala elemen, kecuali nilai dari <script> dan elemen <style>.
Sintak: digunakan untuk mengatur properti innerText.
Return Values: Mengembalikan nilai sebuah string yang merepresentasikan konten teks dari elemen bersamaan dengan nilai turunannya.
Sebelum memahami lebih dalam materi tentang Mengatur Konten Teks HTML Menggunakan innerText DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Konten HTML Menggunakan innerHTML DOM, Mendapatkan Nilai ID HTML Menggunakan ID DOM, dan Memeriksa Atribut HTML Menggunakan hasAttributes DOM.
- node.innerText = text
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti innerText DOM HTML
</title>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti textContent DOM HTML
</h2>
<button
id="Bons"
onclick="MyBons()">
Submit
</button>
<p id="sudo"></p>
<script>
function MyBons()
{
var text =
document.getElementById("Bons").innerText;
document.getElementById("sudo").innerHTML = text;
}
</script>
</body>
</html>
Output:Blog Elfan
Properti textContent DOM HTML
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti innerText DOM HTML
</title>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<h2>
Properti innerText DOM HTML
</h2>
<p id="bonss"
style="font-size:20px;">
Halo Penderitaan Dunia!
</p>
<button onclick="MyBons()">
Submit
</button>
<!-- Fungsi MyBons untuk
mengganti inner text -->
<script>
function MyBons()
{
document.getElementById("bonss").innerText =
"Welcome to Ambarawa!";
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti innerText DOM HTML
Halo Penderitaan Dunia!
Mengatur konten teks dalam dokumen HTML menjadi salah satu kebutuhan utama dalam pengembangan halaman web. Salah satu cara untuk melakukannya adalah dengan menggunakan properti innerText dalam model objek dokumen. Properti ini memiliki peran penting dalam manipulasi elemen-elemen teks dalam dokumen HTML secara dinamis. Dengan pemahaman yang baik tentang cara kerja innerText, pengembang web dapat membuat halaman yang lebih interaktif dan responsif terhadap berbagai perubahan.
InnerText adalah salah satu properti yang dapat digunakan untuk mengakses atau mengubah konten teks dari sebuah elemen HTML. Teks yang dimaksud di sini adalah teks yang dapat dilihat oleh pengguna, yang berada dalam elemen HTML yang sesuai. Berbeda dengan properti lain seperti innerHTML, yang dapat mengakses atau mengubah seluruh isi elemen, termasuk tag HTML, innerText hanya berfokus pada konten teks yang ditampilkan di halaman.
Saat digunakan, innerText akan memberikan teks yang tampak di layar, mengabaikan tag HTML yang ada di dalam elemen tersebut. Hal ini berarti jika terdapat elemen HTML seperti <b> atau <i> dalam teks, maka properti ini hanya akan mengembalikan teks yang ada tanpa mempertimbangkan elemen pembungkus tersebut. Keunggulan ini memungkinkan pengembang untuk memanipulasi teks dengan cara yang lebih sederhana, tanpa perlu memperhatikan struktur elemen-elemen HTML yang lebih kompleks.
Baca Juga:
Salah satu kegunaan utama dari properti ini adalah dalam mengubah konten teks pada elemen-elemen dinamis dalam aplikasi web. Misalnya, ketika sebuah elemen teks perlu diperbarui setelah peristiwa tertentu terjadi, seperti ketika pengguna mengklik tombol atau setelah data berhasil dimuat dari server. Dengan innerText, pengembang dapat mengganti isi teks dengan nilai baru yang diinginkan, tanpa mengubah struktur elemen secara keseluruhan.
Selain itu, penggunaan innerText juga memudahkan dalam mengambil teks dari elemen tertentu untuk diproses lebih lanjut. Misalnya, jika perlu mengambil informasi dari sebuah paragraf atau elemen lainnya dalam halaman web, pengembang dapat memanfaatkan innerText untuk mengakses teks tersebut dengan cara yang mudah dan efisien. Ini sangat berguna dalam aplikasi-aplikasi yang memerlukan interaksi dengan pengguna, seperti formulir atau aplikasi berbasis data.
Namun, meskipun innerText menawarkan banyak manfaat, ada beberapa hal yang perlu diperhatikan. Salah satu hal yang harus dipahami adalah bahwa innerText memperhitungkan gaya tampilan atau pengaturan elemen saat menampilkan teks. Artinya, jika sebuah elemen tersembunyi melalui pengaturan CSS, seperti dengan mengatur display menjadi none atau visibility menjadi hidden, maka teks dalam elemen tersebut tidak akan dianggap sebagai bagian dari teks yang dapat diakses atau diubah oleh innerText. Ini menjadi perbedaan penting dibandingkan dengan innerHTML, yang masih dapat mengakses konten meskipun elemen tersebut tersembunyi dari tampilan.
Selain itu, meskipun innerText dapat digunakan untuk mengambil dan mengubah teks, penggunaannya tidak selalu disarankan untuk setiap kasus. Untuk beberapa situasi, terutama yang melibatkan manipulasi elemen yang lebih kompleks, penggunaan textContent atau innerHTML mungkin lebih sesuai. textContent misalnya, memiliki perilaku yang lebih konsisten karena tidak memperhitungkan gaya tampilan atau pengaturan elemen dalam dokumen.
Meskipun demikian, bagi banyak aplikasi web, innerText menjadi pilihan yang sangat baik ketika hanya perlu bekerja dengan teks yang terlihat di layar dan tidak melibatkan elemen-elemen HTML lainnya. Penggunaannya memungkinkan pengembang untuk dengan mudah memperbarui teks dalam halaman web tanpa perlu melakukan perubahan pada struktur dokumen secara keseluruhan.
Dalam konteks pengembangan antarmuka pengguna yang dinamis, innerText juga sering digunakan bersama dengan teknik pengelolaan peristiwa. Ketika suatu peristiwa terjadi, seperti klik tombol atau pengisian formulir, nilai teks dalam elemen tertentu dapat diubah secara otomatis menggunakan innerText. Ini memudahkan pengembang dalam memberikan respons terhadap tindakan pengguna secara langsung, tanpa perlu memuat ulang halaman atau mengubah elemen-elemen lain dalam dokumen.
Selain itu, innerText juga mempermudah pengembangan aplikasi berbasis data yang menampilkan informasi dalam elemen-elemen tertentu. Sebagai contoh, dalam aplikasi yang menampilkan daftar produk atau informasi pengguna, teks dalam elemen-elemen tersebut dapat diperbarui secara dinamis berdasarkan data yang diterima. Dengan menggunakan innerText, pengembang dapat mengubah teks yang ada tanpa perlu khawatir tentang elemen-elemen lain dalam dokumen yang mungkin terpengaruh oleh perubahan tersebut.
Keamanan dan kenyamanan pengguna juga menjadi pertimbangan penting saat menggunakan innerText. Menggunakan properti ini dengan hati-hati dapat membantu menjaga konsistensi dan keamanan aplikasi web. Misalnya, jika data yang dimasukkan oleh pengguna perlu ditampilkan dalam elemen teks, properti innerText dapat membantu mencegah masalah terkait dengan penyisipan elemen-elemen HTML yang tidak diinginkan, yang dapat menyebabkan kerentanannya terhadap serangan injeksi.
Sebagai kesimpulan, innerText memberikan cara yang efisien dan efektif untuk mengelola teks dalam dokumen HTML. Meskipun ada alternatif lain seperti textContent dan innerHTML, penggunaan innerText tetap menjadi pilihan populer bagi pengembang yang ingin fokus pada manipulasi teks yang ditampilkan di halaman. Dengan pemahaman yang baik tentang cara kerjanya, innerText dapat menjadi alat yang sangat berguna dalam menciptakan aplikasi web yang lebih dinamis, interaktif, dan responsif terhadap kebutuhan pengguna.
Referensi Tambahan:
- 2 Nilai Properti isContentEditable DOM pada HTML
- Cara Penggunaan Method isDefaultNamespace() DOM pada HTML
- Cara Penggunaan Method isEqualNode() DOM pada HTML
- 2 Nilai Parameter pada Method isSameNode() DOM pada HTML
- Cara Penggunaan Method isSupported() DOM pada HTML
- 2 Contoh Penggunaan Properti Lang DOM pada HTML
- 2 Contoh Penggunaan Properti lastChild DOM pada HTML
Artikel ini akan dibaca oleh: Inge Indah Wijayatri, Intan Kurnia Putri, Intan Nurhayati, Ishana Sanjaya Wardhani, dan Ivanka Bimo Al-Machzumi W.
5 komentar untuk "Mengatur Konten Teks HTML Menggunakan innerText DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti innerText DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti innerText DOM pada HTML:
Hapus1. Google Chrome 1.0
2. Internet Explorer 4.0
3. Firefox 1.0
4. Opera 3.5
5. Safari 1.0
Apa yang dimaksud dengan properti innerText DOM pada HTML?
BalasHapusProperti innerText DOM pada HTML digunakan untuk mengatur atau mengembalikan konten teks dari node yang telah ditentukan dan semua bentuk turunannya. Jika user mengatur properti pada innerText, maka node turunan apapun akan dihapus dan diganti dengan node teks tunggal yang berisi string yang telah ditentukan.
HapusProperti innerText dari interface HTMLElement merupakan properti yang mewakili konten teks yang "dirender" dari sebuah node dan turunannya. Properti innerText memperkirakan teks yang akan diperoleh user jika menyorot konten elemen dengan kursor dan menyalinnya ke clipboard.
Hapus