Melakukan Insert Teks HTML Menggunakan insertAdjacentHTML DOM
 |
| Ilustrasi insertAdjacentHTML DOM HTML |
node.insertAdjacentHTML(specify-position, text-to-enter)
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.
<!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.- Cara Penggunaan Method isEqualNode() DOM pada HTML [klik]
- 2 Nilai Parameter pada Method isSameNode() DOM pada HTML [klik]
- Cara Penggunaan Method isSupported() DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti Lang DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti lastChild DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti lastElementChild DOM pada HTML [klik]
- Cara Penggunaan Properti nextSibling DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method insertAdjacentHTML() DOM?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengktifkan method insertAdjacentHTML() DOM:
Hapus1. Google Chrome 1.0
2. Internet Explorer 4.0
3. Firefox 8.0
4. Opera 7.0
5. Safari 4.0
Apa fungsi method insertAdjacentHTML() DOM?
BalasHapusFungsi 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.
HapusMethod HTML DOM insertAdjacentHTML() digunakan untuk menyisipkan string teks sebagai HTML pada suatu posisi tertentu.
Hapus