Halo dumenity selamat datang kembali di website tips dan trik Dumet School, kembali lagi dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Menggunakan Fungsi insertAdjacentHTML Javascript dimana dengan menggunakan fungsi ini kita dapat meambahkan elemen setelahnya dengan menambahkan afterend. Yaitu untuk menambahkan elemen setelah html yang akan di tambahkan, dalam kasus ini saya akan menggunakan fungsi ini untuk membuat elemen baru atau cloning elemen html dimana saya akan membuat sebuah form input kemudian saya akan membuat button dan button ketika di klik maka form input akan di tambahkan setelahnya

Cara Menggunakan Fungsi insertAdjacentHTML Javascript

Pada gambar di atas ini saya mempunyai 1 buah form input, kemudian saya akan membuat sebuah fungsi clone form input pada saat button di klik. Baik, langsung 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 Fungsi insertAdjacentHTML Javascript</title>
</head>
<body>
<h2>Cara Menggunakan Fungsi insertAdjacentHTML Javascript</h2>
	<button class="btn">+</button><br>
	<input type="text" placeholder="Nama Materi" id="input"><br>
	<button>Simpan</button>
</body>
</html>

Kemudian save dengan nama index.html, selanjutnya kita tambahkan script javascript nya untuk cloning form input nya. Pertama kita panggil terlebih dengan class btn nya dan berikan fungsi onclick

var btn = document.querySelector(".btn");
var input = document.querySelector("#input");
btn.onclick= function(){
	input.insertAdjacentHTML('afterend', `<br><input type="text" placeholder="Nama Materi">
							<span class="hapus">X</span></div>`);
	hapus();
}

Selanjutnya kita buat fungsi 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 untuk span nya untuk berikan cursor:pointer

span{cursor: pointer; margin-left: 15px; font-size: 20px;}

Jika sudah save dan jalankan pada browsernya dan klik button dengan icon “+”

Cara Menggunakan Fungsi insertAdjacentHTML Javascript

Dan klik icon “X” untuk delete form nya, itulah cara Cara Menggunakan Fungsi insertAdjacentHTML Javascript dalam kasus ini saya buat untuk membuat cloning form input.

Sekian pada artikel kali ini, kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.