Menambahkan Text Node kepada Elemen Baru

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

Membuat elemen baru anda bisa gunakan metode Document.createElement(). Seperti contoh di bawah ini membuat elemen P:

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

Setelah itu anda bisa 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, ketika 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(), bisa 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 contoh di atas sama seperti kode HTML berikut:

<P>Lorem ipsum...</P>