Add Text To Div Element Javascript

3 min read Jun 22, 2024

Cara Menambahkan Teks ke Elemen Div dengan JavaScript

JavaScript menawarkan beberapa metode sederhana untuk menambahkan teks ke elemen div. Berikut beberapa cara yang umum digunakan:

1. Menggunakan innerHTML

Salah satu cara paling umum adalah menggunakan properti innerHTML. Properti ini memungkinkan Anda untuk mengatur konten HTML dari elemen yang diberikan.

const myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Teks yang ditambahkan";

Dalam contoh di atas, kode akan mencari elemen dengan ID "myDiv" dan mengganti kontennya dengan teks "Teks yang ditambahkan".

2. Menggunakan innerText

Jika Anda hanya ingin menambahkan teks biasa (tanpa format HTML), Anda dapat menggunakan properti innerText. Properti ini akan mengabaikan semua tag HTML dan hanya menampilkan teks plain.

const myDiv = document.getElementById("myDiv");
myDiv.innerText = "Teks yang ditambahkan";

3. Menggunakan createTextNode dan appendChild

Metode ini sedikit lebih rumit, tetapi memungkinkan Anda untuk lebih mengontrol teks yang ditambahkan.

const myDiv = document.getElementById("myDiv");
const newText = document.createTextNode("Teks yang ditambahkan");
myDiv.appendChild(newText);

Kode ini akan membuat objek teks baru dengan konten "Teks yang ditambahkan", lalu menambahkannya sebagai anak dari elemen div.

4. Menggunakan textContent

Properti textContent mirip dengan innerText, tetapi ia akan menampilkan semua teks, termasuk teks yang ada di dalam tag HTML.

const myDiv = document.getElementById("myDiv");
myDiv.textContent = "Teks yang ditambahkan";

Perbedaan Antara innerHTML, innerText, dan textContent

Properti	Deskripsi
`innerHTML`	Menampilkan konten HTML, termasuk tag.
`innerText`	Menampilkan teks biasa, mengabaikan tag HTML.
`textContent`	Menampilkan semua teks, termasuk teks di dalam tag HTML.

Tips Tambahan

Anda dapat menggunakan metode createElement untuk membuat elemen baru dan menambahkannya ke dalam elemen div.
Anda dapat menggunakan metode insertAdjacentHTML untuk menambahkan teks atau HTML ke dalam elemen div pada posisi tertentu.
Pastikan elemen div yang ingin Anda modifikasi sudah ada di dalam halaman HTML Anda.

Dengan memahami metode-metode ini, Anda dapat dengan mudah menambahkan teks ke elemen div di halaman web Anda menggunakan JavaScript.