Javascript menambahkan teks setelah elemen

Ringkasan. dalam tutorial ini, Anda akan mempelajari cara menggunakan metode JavaScript append() untuk menyisipkan sekumpulan objek Node atau objek DOMString setelah anak terakhir dari simpul induk

Pengantar metode JavaScript append()

Metode

<ul id="app"> <li>JavaScript</li> </ul>

parentNode.append(...nodes); parentNode.append(...DOMStrings);

Metode append() akan menyisipkan objek DOMString sebagai

<ul id="app"> <li>JavaScript</li> </ul>

Perhatikan bahwa DOMString adalah string UTF-16 yang memetakan langsung ke string

Metode append() tidak memiliki nilai pengembalian. Ini berarti bahwa metode append()_ secara implisit mengembalikan

<ul id="app"> <li>JavaScript</li> </ul>

Contoh metode JavaScript append()

Mari kita ambil beberapa contoh penggunaan metode append()

1) Menggunakan metode append() untuk menambahkan contoh elemen

Misalkan Anda memiliki elemen

let app = document.querySelector('#app'); let langs = ['TypeScript','HTML','CSS']; let nodes = langs.map(lang => { let li = document.createElement('li'); li.textContent = lang; return li; }); app.append(...nodes);

<ul id="app"> <li>JavaScript</li> </ul>

Contoh berikut menunjukkan cara membuat daftar elemen

let app = document.querySelector('#app'); let langs = ['TypeScript','HTML','CSS']; let nodes = langs.map(lang => { let li = document.createElement('li'); li.textContent = lang; return li; }); app.append(...nodes);

let app = document.querySelector('#app'); let langs = ['TypeScript','HTML','CSS']; let nodes = langs.map(lang => { let li = document.createElement('li'); li.textContent = lang; return li; }); app.append(...nodes);

Memodifikasi konten DOM adalah tugas paling dasar dalam hal browser. Terkadang kami ingin mengubah teks DOM berdasarkan tindakan tertentu tanpa merender ulang seluruh DOM. Pada artikel ini, kita akan mempelajari cara menambahkan teks ke elemen teks yang ada di JavaScript melalui DOM

Tambahkan Teks ke Elemen Teks yang Ada di JavaScript melalui DOM Menggunakan appendChild

DOM berisi daftar node. Setiap node berisi datanya sendiri. JavaScript memungkinkan instance node baru untuk ditambahkan ke daftar node anak yang ada di dalam node induk yang dipilih

Sintaksis

Fungsi appendChild()_ mengambil parameter input dari simpul yang baru dibuat atau elemen paling umum yang harus ditambahkan ke simpul induk. appendChild()_ memindahkan anak yang diberikan dari lokasinya saat ini ke lokasi baru jika mereferensikan simpul yang ada

Ini mengembalikan simpul yang merupakan anak tambahan (anak), kecuali jika anak adalah DocumentFragment. Dalam hal ini, DocumentFragment yang kosong dikembalikan. Untuk informasi lebih lanjut, baca dokumentasi metode appendChild

Hello

JavaScript Channel

const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); _

Dalam contoh di atas, kami telah membuat simpul teks menggunakan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 2 dan kemudian menambahkannya ke simpul const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 3 dokumen. Output dari kode di atas akan membuat DOM seperti di bawah ini

Keluaran

"Hello Welcome to My channel"

Tambahkan Teks ke Elemen Teks yang Ada di JavaScript melalui DOM Menggunakan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 4

Ini adalah properti dari antarmuka const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); _5, yang mewakili konten tekstual dari node yang dipilih dan turunannya. JavaScript memungkinkan teks lain untuk ditambahkan ke konten teks saat ini dari simpul anak dalam simpul induk yang dipilih

Sintaksis

Properti textContent memperbarui konten teks dari node yang dipilih. Pengguna dapat memodifikasi data teks sesuai kebutuhan, seperti penggabungan, pembaruan, dll. Jika node adalah dokumen atau tipe dokumen, textContent mengembalikan null. textContent mengembalikan rangkaian textContent dari setiap node anak untuk tipe node lainnya, kecuali komentar dan instruksi pemrosesan. Ini adalah string kosong ketika sebuah node tidak memiliki anak. Untuk informasi selengkapnya, baca dokumentasi properti const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 4

const pNode = document.getElementById("p"); pNode.textContent += "Welcome to My channel";

Dalam contoh di atas, kami mendapatkan simpul paragraf menggunakan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 7 dan kemudian menambahkan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 8 ke konten tekstual simpul paragraf yang ada. Keluaran kode di atas memperbarui DOM sebagai berikut

Keluaran

"Hello Welcome to My channel"

Tambahkan Teks ke Elemen Teks yang Ada di JavaScript melalui DOM Menggunakan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 9

Itu milik "Hello Welcome to My channel" _0. Properti ini mewakili konten tekstual yang dirender dari node yang dipilih dan keturunannya. JavaScript memungkinkan teks lain untuk ditambahkan ke konten teks saat ini dari simpul anak dalam simpul induk yang dipilih

Sintaksis

const renderedText = htmlElement.innerText htmlElement.innerText = string

Properti innerText memperbarui konten teks dari node yang dipilih. Pengguna dapat mengubah data teks sesuai kebutuhan, seperti penggabungan, pembaruan, dll. Untuk informasi selengkapnya, lihat dokumentasi properti ________9______9

const pNode = document.getElementById("p"); pNode.innerText += "Welcome to My channel";

Dalam contoh di atas, kami mendapatkan simpul paragraf menggunakan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 7 dan kemudian menambahkan const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); 8 ke konten tekstual simpul paragraf yang ada. Keluaran kode di atas memperbarui DOM sebagai berikut

Keluaran

"Hello Welcome to My channel"

Satu-satunya perbedaan antara textContent dan innerText adalah bahwa textContent mendapatkan konten dari semua elemen, termasuk elemen "Hello Welcome to My channel" 4 dan "Hello Welcome to My channel" 5. Sebaliknya, innerText hanya menampilkan elemen yang dapat dibaca manusia. const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); _4 mengembalikan semua elemen node. Sebaliknya, const text = document.createTextNode("Welcome to My channel"); const pNode = document.getElementById("p"); pNode.appendChild(text); _9 memperhatikan gaya dan tidak mengembalikan teks apa pun dari elemen tersembunyi. Pada prinsipnya, innerText mengenali tampilan teks yang dirender, tetapi textContent tidak

Bagaimana cara menambahkan teks setelah elemen dalam JavaScript?

Bagaimana Anda menulis setelah di JavaScript?

Bagaimana cara menambahkan teks secara dinamis dalam JavaScript?

Bagaimana cara menambahkan HTML setelah elemen JavaScript?