Mengubah Elemen HTML Dengan DOM Javascript
mengubah Elemen ada beberapa property/method yang harus kita ketahui seperti berikut:
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>Last updated