Sebagai programmer yang menginginkan source codenya mudah dimanage kita mungkin akan mengurangi sebanyak mungkin ketergantungan terhadap library. Begitu juga dalam menggunakan Javascript kita mungkin berusaha ingin menggunakan nativa Javascript.

Begitu juga kita mungkin menginnginkan menggunakan native Javascript untuk function append dalam jQuery. Pertama-tama saya menggunakan innerHTML untuk menggantikan jQuery append, tetapi ternyata ada kesulitan saat ada form yang sudah diisi input tiba-tiba nilai yang sudah diinput hilang.

Kemudian saya mencari metode lain dan saya pikir pasti ada. Kemudian saya browsing-browsing dan mendapatkan halaman The HTML DOM Element Object (https://www.w3schools.com/jsref/dom_obj_all.asp) pada W3Schools.com  dan saya mencoba HTML DOM insertAdjacentHTML ( https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp)  dan berhasil.

Prinsip penggunaan insertAdjacentHTML ini adalah

  1. Mencari elemen terakhir yang akan ditambahkan
  2. Gunakan insertAdjacentHTML pada bagian akhir
  3. Contohnya adalah
    document.querySelector(‘#tr-‘+ baris_lama).insertAdjacentHTML(“afterend”, html_tambahan);

Informasi lebih lanjut silahkan mengunjungi
1. https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp .
2. https://www.w3schools.com/jsref/dom_obj_all.asp .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Native Javascript untuk jQuery append