Cara Menggunakan Fungsi insertAdjacentHTML Javascript
Halo dumenity selamat datang kembali di laman tips dan trik Source Code Aplikasi, kembali lagi dengan saya di pembahasan tips dan trik seputar dunia laman. Di kesempatan kali ini saya akan memberikan tips mengenai Cara Menggunakan Fungsi insertAdjacentHTML Javascript dimana dengan menggunakan kegunaan ini kita dapat meambahkan faktor setelahnya dengan menambahkan afterend. Yaitu bagi menambahkan faktor setelah html yang akan di tambahkan, pada kasus ini saya akan menggunakan kegunaan ini bagi merancang faktor baru atau cloning faktor html dimana saya akan merancang sebuah form input kemudian saya akan merancang button dan button ketika di klik karenanya form input akan di tambahkan setelahnya
Di gambar di atas ini saya mempunyai 1 buah form input, kemudian saya akan merancang sebuah kegunaan clone form input di dikala button di klik. Bagus, seketika saja kita implementasikan Cara Menggunakan Fungsi insertAdjacentHTML Javascript teman – teman siapkan text editornya dan ketikkan script html nya di bawah ini
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Cara Menggunakan Kegunaan insertAdjacentHTML Javascript</title>
</head>
<body>
<h2>Cara Menggunakan Kegunaan insertAdjacentHTML Javascript</h2>
<button class=btn>+</button><br>
<input type=text placeholder=Nama Bahan id=input><br>
<button>Simpan</button>
</body>
</html>
Kemudian save dengan nama index.html, berikutnya kita tambahkan script javascript nya bagi cloning form input nya. Pertama-tama kita panggil terlebih dengan class btn nya dan berikan kegunaan onclick
var btn = document.querySelector(.btn);
var input = document.querySelector(#input);
btn.onclick= function(){
input.insertAdjacentHTML('afterend', `<br><input type=text placeholder=Nama Bahan>
<span class=hapus>X</span></div>`);
hapus();
}
Berikutnya kita bikin kegunaan delete form nya
function hapus(){
var close = document.querySelectorAll(span);
for(var i=0; i<close.length; i++) {
close[i].onclick = function(){
var row = this.parentNode;
row.parentNode.removeChild(row);
}
}
}Dan tambahkan css nya bagi span nya bagi berikan cursor:pointer
span{cursor: pointer; margin-left: 15px; font-size: 20px;}Seandainya telah save dan jalankan di browsernya dan klik button dengan icon “+”
Dan klik icon “X” bagi delete form nya, begitulah cara Cara Menggunakan Fungsi insertAdjacentHTML Javascript pada kasus ini saya bikin bagi merancang cloning form input.
Demikianlah di artikel kali ini, kita jumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa, semoga bermanfaat.
Sumber https://kursuswebsite.org
