Mengubah Elemen HTML Dengan DOM Javascript

mengubah Elemen ada beberapa property/method yang harus kita ketahui seperti berikut:

Property/Method

Penjelasan

element.innerHTML = “isi konten”

Mengubah konten suatu elemen dengan konten yang baru

element.style.property_css = nilai property

Mengubah style CSS suatu elemen

element.setAttribute(nama_atribut, nilai)

Mengubah nilai atribut

Untuk contoh Mengubah Elemen HTML Dengan DOM sama seperti yang saya contohkan diatas kan tadi tapi itu yang saya gunakan adalah element.innerHTML = “isi konten”.

Jika kamu menggunakan element.nama_atribut = “nilai atribut”, kamu bisa mengantinya atau mengubahnya dengan title, align, src, dan sebagainya.

Jika kamu menggunakan element.style.property_css = nilai property, kamu bisa mengganti dengan nama property css yang ingin diubah, tetapi tidak menggunakan penghubung ”-” melainkan kata kedua diawali huruf besar, jika nama property lebih dari satu kata, misanya: fontFamily, textAlign, marginLeft, dan sebagainya.

kode : innerHTML

<!DOCTYPE html>
<html>
<body>
<h1>The Element Object</h1>
<h2>The innerHTML Property</h2>

<p id="myP">I am a paragraph.</p>

<p>The content of "myP" is:</p>
<p id="demo"></p>

<script>
let html = document.getElementById("myP").innerHTML;
document.getElementById("demo").innerHTML = html;
</script>

</body>
</html>

kode: style

<!DOCTYPE html>
<html>
<body>
<h1 id="myH1">The Element Object</h1>
<h2>The style Property</h2>

<script>
document.getElementById("myH1").style.color = "red";
</script>

</body>
</html>

kode: setAtrribute

<!DOCTYPE html>
<html>
<style>
.democlass {
  color: red;
}
</style>

<body>
<h1 id="myH1">The Element Object</h1>
<h2>The setAttribute() Method</h2>

<p>Click "Add Class" to add a class attribute to the h1 element:</p>

<button onclick="myFunction()">Add Class</button>

<script>
function myFunction() {
  document.getElementById("myH1").setAttribute("class", "democlass"); 
}
</script>

</body>
</html>

PreviousMenemukan Elemen HTML Dengan DOM Javascript NextMenambah atau Menghapus Elemen HTML Dengan DOM Javascript

Last updated 3 years ago