Home / Software Engineer / Memanipulasi HTML DOM di dalam Variable dengan jQuery

Memanipulasi HTML DOM di dalam Variable dengan jQuery

1 month ago under Software Engineer. No Comments

Kalo kalian lagi belajar jQuery pasti tau fungsi innerHTML(), fungsi jQuery ini bakalan mengambil element DOM dalam html, contohnya

var bodyHtml = $('body').innerHTML();
console.log( bodyHtml ); //<div class="main">...</div>

Nah di bakalan ngambil semua kode HTML di dalam body, dan menyimpannya di dalem variable bodyHTML, biasanya innerHTML selain digunain buat ambil, dia juga bisa digunain untuk merubah html yang ada di dalem tag tadi

Kalo lu tau react, ini adalah dasarnya, cuma nggak pake jQuery ya, soalnya react pake fungsi dari javascript langsung, innerHTML, nah ini yang bikin aplikasi nggak perlu di reload, soalnya langsung di tempel pake innerHTML, contoh gampangnya

User Klik Tombol -> AJAX REQUEST -> AJAX RESPONSE -> Jika ada Response, Ambil Responsenya, trus tampilkan dengan innerHTML

var bodyHtml = $('body').innerHTML( response );

Otomatis nanti semua yang ada di dalem body bakalan keganti sama response dari server, ibaratnya lu udah nulis trus langsung di hapus semuanya, di gantiin sama response dari server, ini berarti lu nggak perlu repot” reload halaman buat ganti konten html, sangat berguna bukan

Nah masalahnya adalah lu terkadang nggak bisa main tempel aja, harus ada yang di rubah sebelum bener” di tempel, cuma disisi javascriptnya, nah disini lah tutorial akan dimulai

karena response atau innerHTML bentuknya variable, ini harus lu parsing dulu ke HTML DOM, supaya fungsi jQuery bisa bekerja, seperti find, remove, dan kawan-kawannya.

let html = response; // response dari ajax, atau variable dari innerHTML
var $html = $('<div />',{html:html }); //parse 

// saatnya manipulasi, cari form, tambahkan atribut id = eureka
$html.find('form').attr("id", 'eureka' );

nah dengan kode parse itu, sekarang lu bisa menggunakan fungsi jQuery di variable atau response AJAX lu, tinggal manipulasi deh via Javascript mana yang harus di hapus, mana yang harus di buat ulang

Sekian, kalo bingung coba searching dulu bedain jQuery dan Javascript, kalo udah baru boleh komen, wkwkw

Leave a Reply

Your email address will not be published. Required fields are marked *

Save my name and email for the next time I comment.