Cara Menambahkan Teks ke Span Menggunakan JavaScript
Span adalah elemen HTML yang berguna untuk menandai bagian teks tertentu dalam dokumen HTML. Dengan JavaScript, kita dapat menambahkan, mengubah, atau menghapus teks di dalam elemen span dengan mudah.
Berikut adalah beberapa cara untuk menambahkan teks ke span menggunakan JavaScript:
1. Menggunakan innerHTML
Metode innerHTML memungkinkan kita untuk mengatur konten HTML dari suatu elemen. Kita dapat menambahkan teks ke span dengan cara berikut:
const mySpan = document.getElementById("mySpan");
mySpan.innerHTML = "Teks yang ingin ditambahkan";
Kode di atas akan mengganti semua konten di dalam span dengan id "mySpan" dengan "Teks yang ingin ditambahkan".
2. Menggunakan textContent
Metode textContent menetapkan konten teks dari sebuah elemen, dan hanya akan menampilkan teks biasa, bukan tag HTML.
const mySpan = document.getElementById("mySpan");
mySpan.textContent = "Teks yang ingin ditambahkan";
Kode di atas akan menambahkan teks "Teks yang ingin ditambahkan" ke dalam span dengan id "mySpan".
3. Menggunakan appendChild
Metode appendChild memungkinkan kita menambahkan elemen baru ke dalam elemen yang sudah ada. Kita dapat menambahkan teks ke span dengan membuat elemen teks baru dan menambahkannya ke dalam span.
const mySpan = document.getElementById("mySpan");
const newText = document.createTextNode("Teks yang ingin ditambahkan");
mySpan.appendChild(newText);
Kode di atas akan menambahkan teks "Teks yang ingin ditambahkan" ke dalam span dengan id "mySpan".
4. Menggunakan innerText
Metode innerText serupa dengan textContent, tetapi dengan beberapa perbedaan kecil. innerText akan menangani masalah white space dan mengembalikan teks yang terlihat di browser, sedangkan textContent akan menampilkan semua teks tanpa pemformatan.
const mySpan = document.getElementById("mySpan");
mySpan.innerText = "Teks yang ingin ditambahkan";
Kode di atas akan menambahkan teks "Teks yang ingin ditambahkan" ke dalam span dengan id "mySpan".
Perbedaan antara innerHTML, textContent, dan innerText
- innerHTML: Mengatur konten HTML dari suatu elemen.
- textContent: Mengatur konten teks dari suatu elemen.
- innerText: Mengatur konten teks yang terlihat di browser.
Contoh
Berikut adalah contoh lengkap bagaimana menambahkan teks ke span menggunakan JavaScript:
Menambahkan Teks ke Span
Teks awal
Kode di atas akan menampilkan teks berikut di dalam span dengan id "mySpan":
Teks awal Teks tambahan 1 Teks tambahan 2 Teks tambahan 3
Kesimpulan
Ada berbagai cara untuk menambahkan teks ke span menggunakan JavaScript. Pilih metode yang sesuai dengan kebutuhan Anda dan pastikan untuk memilih metode yang paling efisien untuk aplikasi Anda.