Membuat, Membaca, Update dan Menghhapus sebuah Elemen menggunakan Javascript 


1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>

<html>
<head>
    <title>CRUD using Javascript</title>
</head>
<body>
 <div id="container">

 </div>
</body>
</html>

Buat Elemen dan pasang ke DOM (Document Object Model)

Functions used: createElement, setAttribute, getElementById, appendChild
1
2
3
4
5
6
7
8
9
10
11

var newElement = document.createElement("div");

//Give an ID to our new Element
 newElement.setAttribute("id", "newDiv");

//Provide some content to it.
 newElement.innerHTML = "<p>Javascript is Awesome!</p>";


//Now, attach the new Element to our docuement
 document.getElementById("container").appendChild("newElement");

Membaca Elemen

1
2
3
4
5

//get the text of an element
 var getText = document.getElementById("newDiv").innerHTML;

//get the attribute of an element
 var getId = document.getElementById("newDiv").getAttribute("id");

Memperbarui Elemen

1
2
3
4
5

//Update the text
 document.getElementById("newDiv").innerHTML = "<p>Javascript was designed by Brendan Eich</p>";

//Update the attributes
 document.getElementById("newDiv").setAttribute("align", "right");

Menghapus Elemen

1
2
3
4
5

//With reference to newDiv
document.getElementById("newDiv").parentNode.removeChild("newDiv");

//With reference to parent element
document.getElementById("container").removeChild("newDiv");