2 Contoh Penggunaan Method insertAdjacentHTML DOM pada HTML

Method insertAdjacentHTML() DOM pada HTML digunakan untuk melakukan insert teks sebagai file html untuk posisi spesifik. Method insertAdjacentHTML digunakan untuk mengubah atau menambahkan teks sebagai HTML.

Sintak:
node.insertAdjacentHTML(specify-position, text-to-enter)

Return Value: method insertAdjacentHTML() akan mengembalikan halaman dengan perubahan spesifik.

Terdapat empat posisi nilai legal yang dapat digunakan pada method insertAdjacentHTML(), yaitu:
  • afterbegin: digunakan untuk menambahkan teks ketika elemen diseleksi.
  • afterend: digunakan untuk menambahkan teks ketika elemen diakhiri.
  • beforebegin: digunakan untuk menambahkan teks sebelum elemen diseleksi.
  • beforeend: digunakan untuk menambahkan teks setelah elemen diseleksi.

Contoh: ilustrasi penggunaan posisi "afterbegin".

<!DOCTYPE html>

<html>

 

<head>

<title>

Method insertAdjacentHTML()

DOM HTML

</title>

 

<style>

h1, h2 

{

color: green;

text-align: center;}

 

div 

{

width: 80%;

height: 240px;

border: 2px solid green;

padding: 10px;}

</style>

</head>

 

<body>

 

<div>

<h2>Selamat datang</h2>

 

<h1>

<u> Blog Elfan.!</u>

</h1>

 

<h2 id="main">

Method insertAdjacentHTML() 

DOM HTML

</h2>

</div>

 

<br>

 

<button 

onclick="myFunction()">

Click me.!

</button>

 

<script>

function myFunction() 

{

var h = document.getElementById("main");

h.insertAdjacentHTML("afterbegin",

"<span style='color:" 

+"green; background-" 

+"color: lightgrey; " 

+"width: 50%;'>This " 

+"is Example of</span>");

}

</script>

 

</body>

 

</html>


Contoh: ilustrasi penggunaan posisi "afterend".

<!DOCTYPE html>

<html>

 

<head>

<title>

Method insertAdjacentHTML()

DOM HTML

</title>

 

<style>

h1, h2 

{

color: green;

text-align: center;}

 

div 

{

width: 80%;

height: 240px;

border: 2px solid green;

padding: 10px;}

</style>

</head>

 

<body>

 

<div>

 

<h2>

Selamat Datang

</h2>

 

<h1>

<u>

Blog Elfan.!

</u>

</h1>

 

<h2 id="main">

Contoh Penggunaan

</h2>

 

</div>

 

<br>

 

<button onclick="myFunction()">

Click me.!

</button>

 

<script>

function myFunction() 

{

var h = document.getElementById("main");

h.insertAdjacentHTML("afterend",

"<span style='color:green; " +

"background-color: lightgrey;" +

"font-size: 25px; " +

"padding-left: 30px;" +

"padding-right: 30px;" +

"width: 50%;'>" +

"HTML DOM insertAdjacentHTML() Method" +

"</span>");

}

</script>

 

</body>

 

</html>

Catatan: "beforebegin" dan "beforeend" juga dapat digunakan untuk menambahkan teks pada html.

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method insertAdjacentHTML() DOM?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengktifkan method insertAdjacentHTML() DOM:
      1. Google Chrome 1.0
      2. Internet Explorer 4.0
      3. Firefox 8.0
      4. Opera 7.0
      5. Safari 4.0

      Hapus
  2. Apa fungsi method insertAdjacentHTML() DOM?

    BalasHapus
    Balasan
    1. Fungsi method insertAdjacentHTML() dari interface elemen adalah melakukan parsing teks yang ditentukan sebagai HTML atau XML dan digunakan untuk menyisipkan node yang dihasilkan tersebut ke dalam DOM tree pada posisi tertentu.

      Hapus
    2. Method HTML DOM insertAdjacentHTML() digunakan untuk menyisipkan string teks sebagai HTML pada suatu posisi tertentu.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C