Sintak pengganti innerHtml

innerHTML merupakan property html dom yang digunakan untuk mengubah atau menambah tag html dari javascript. untuk referensi innerHTML bisa dilihat di w3schools.

innerHTML sangat mudah dan membantu untuk mengubah dom html secara langsung tanpa haru reload halaman website, ini biasa digunakan ketika kita melakukan request ajax, kemudian ingin mengubah tampilan setelah ajax memberi response success.

selain innerHTML ada juga insertAdjacentHTML,

apa itu insertAdjacentHTML?

insertAdjacentHTML parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation. | developer.mozilla.org

dari website developer mozilla  insertAdjacentHTML ini digadang lebih cepat dalam memanipulasi object dom daripada direct langsung menggunakan innerHTML, apalagi menggunakan library pihak ketiga seperti jquery dengan perintah .html(), selain load library jquery yang menambah waktu load, ternyata .html() dari jquery berisi innerHTML juga. hmmmt.

Bagaimana menggunakan insertAdjacentHTML?

syntak nya sebagai berikut : "node.insertAdjacentHTML(position, text)"
tanpa petik
attribut position adalah posisi dimana html yang akan diinsert, ada 4 jenis peletakannya, sebagai berikut :

'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.

attribut text , berisi html/xlm/content yang akan dimasukkan.

simple kan. Oke, Sekian dan semoga bermanfaat.