DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Melakukan Insert Teks HTML Menggunakan insertAdjacentHTML DOM

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.

2 Contoh Penggunaan Method insertAdjacentHTML DOM pada HTML
Ilustrasi insertAdjacentHTML DOM HTML

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

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

Baca Juga:

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

Hubungi admin melalui Wa : +62-896-2514-6106

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

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

~ Ikatlah Ilmu dengan Memostingkannya ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas