Lompat ke konten Lompat ke sidebar Lompat ke footer

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

Sebelum memahami lebih dalam materi tentang Melakukan Insert Teks HTML Menggunakan insertAdjacentHTML DOM, terlebih dahulu pelajari materi tentang: Memasukkan Elemen Spesifik HTML insertAdjacentElement DOM [klik], Mengatur Konten Teks HTML Menggunakan innerText DOM [klik], dan Mendapatkan Konten HTML Menggunakan innerHTML DOM [klik].

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.

Artikel ini didedikasikan kepada: Intan Nurhayati, Ishana Sanjaya Wardhani, Ivanka Bimo Al-Machzumi W, Jaya'Ul Nur Azizah, dan Kamilatun Na'Ima.

5 komentar untuk "Melakukan Insert Teks HTML Menggunakan insertAdjacentHTML DOM"

  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

Hubungi admin melalui Wa : +62-896-2414-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 -
- Big things start from small things -