Categories: Artikel HTML DOM

Menambahkan Text Node Kepada Elemen Baru

Dengan JavaScript dan DOM anda dimungkinkan membuat elemen gres secara dinamis ke dalam dokumen yang ada.

Membuat elemen gres anda sanggup gunakan metode Document.createElement(). Seperti pola di bawah ini membuat elemen P:

var newElem = document.createElement("p");

Setelah itu anda sanggup gunakan metode Node.appendChild() untuk menambahkannya ke body dokumen:

document.body.appendChild(newElem);

Metode Document.createElement() hanya membuat empty elemen, belum termasuk text nodenya.

Contoh saja, dikala newElem ditambahkan ke document tree, kita hanya akan mendapati:

<P></P>

Belum termasuk text nodenya.

Jika ingin menambahkan text node kepada newElem, gunakan metode Document.createTextNode().

var newText = document.createTextNode("Lorem ipsum…");

Untuk menambahkan newText kepada newElem berikut contohnya:

newElem.appendChild(newText);

Nantinya kita akan melihat elemen P sebelumnya menjadi:

<P>Lorem ipsum…</P>

Sebenarnya, selain dengan metode Node.appendChild(), sanggup juga dengan metode Node.insertBefore():

document.body.insertBefore(newElem, null);

Untuk menambahkan text nodenya:

newElem.insertBefore(newText, null);

Silahkan jalankan contoh-contoh di bawah ini.

Contoh 1:

<SCRIPT TYPE="text/javascript"> var newElem = document.createElement("p"); document.body.appendChild(newElem); var newText = document.createTextNode("Lorem ipsum…"); newElem.appendChild(newText); </SCRIPT>

Contoh 2:

<SCRIPT TYPE="text/javascript"> var newElem = document.createElement("p"); document.body.insertBefore(newElem, null); var newText = document.createTextNode("Lorem ipsum…"); newElem.insertBefore(newText, null); </SCRIPT>

Contoh 3:

<P ID="myp"></P> <SCRIPT TYPE="text/javascript"> document.getElementById("myp").innerHTML = "Lorem ipsum…"; </SCRIPT>

Ketiga pola di atas sama menyerupai isyarat HTML berikut:

<P>Lorem ipsum…</P>

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code