Objek DHTML IE menyediakan empat properti yang dapat dibaca dan ditulis untuk memanipulasi konten elemen halaman secara dinamis: innerText, outerText, innerHTML, outerHTML
Dua hal yang perlu diperhatikan:
1. Nilai properti innerText dan outerText disajikan sebagai teks biasa. Bahkan jika berisi tag HTML, itu akan tercermin secara jujur, sedangkan innerHTML dan outerHTML menampilkan teks yang diurai oleh mesin HTML, yang dapat mencerminkan efek kinerja tag HTML dalam atribut.
2. Menetapkan nilai pada atribut outerText dan outerHTML suatu objek (yaitu, operasi penulisan) akan menghapus objek tersebut.
Operasi penugasan keempat atribut di atas hanya menggantikan konten teks dari objek asli. Jika Anda ingin menambahkan konten teks baru pada posisi yang relevan dari elemen tertentu di halaman, Anda perlu menggunakan metode insertAdjacentHTML dan insertAdjacentText. Bentuknya sebagai berikut:
objek.insertAdjacentText(sWhere, sText)
objek.masukkanAdjacentHTML(sWhere, sText)
Diantaranya, sWhere mewakili posisi teks yang disisipkan relatif terhadap tag html. Ini memiliki empat nilai preset berikut:
beforeBegin, afterBegin, beforeEnd, dan afterEnd.
Harap perhatikan poin-poin berikut saat menggunakannya:
1. Kedua metode ini harus digunakan setelah seluruh dokumen dimuat, jika tidak maka akan terjadi kesalahan.
2. InsertAdjacentText hanya dapat menyisipkan teks biasa, dan InsertAdjacentHTML dapat menyisipkan teks dalam format html
3. Saat menggunakan InsertAdjacentHTML untuk menyisipkan skrip, Anda harus menggunakan atribut defer di elemen skrip, jika tidak, kesalahan runtime akan terjadi selama eksekusi skrip
4. Setelah InsertAdjacentHTML menyisipkan elemen html, semua dan kemungkinan kumpulan elemen lainnya akan diperbarui secara otomatis untuk mencerminkan perubahan dinamis. Misalnya, atribut sourceIndex elemen berikutnya pada halaman akan berubah.
5. Metode ini dapat menyebabkan kesalahan runtime saat menetapkan atribut InsertHTML/outerHTML ke tag HTML yang tidak valid. Misalnya, kode berikut akan menyebabkan kesalahan:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="JavaScript">
pdiv.innerHTML = "<p>hello</p>"
</SCRIPT>
</BODI>
Selain itu, detail berikut perlu diperhatikan saat mengoperasikan konten halaman secara dinamis:
1. Hanya konten yang ditampilkan dalam dokumen BODY yang dapat diubah secara dinamis dengan properti dan metode di atas. Konten objek BODY dapat dimanipulasi secara dinamis, namun objek BODY itu sendiri tidak dapat diganti.
2. Atribut dan metode di atas tidak dapat beroperasi pada tag kosong (tag html tanpa konten), seperti input dan img.
3． Untuk objek tabel, hanya objek td (innerHTML/innerText) dan tabel (outerHMTL/outerText) yang dapat menggunakan atribut tertentu untuk mengganti atau menyisipkan konten; objek tabel lainnya, seperti tr dan tbody, tidak dapat menggunakan atribut ini untuk mengubah konten.