Install Web App

BRIEF

MINA

Javascript Intermediate

Belajar Javascript Intermediate #45 DOM - Membuat Elemen

profil-penulis

Robert Saputra

01 Februari 2023

Membuat Elemen DOM dengan JavaScript

DOM (Document Object Model) adalah bagian dari JavaScript yang memungkinkan kita untuk bekerja dengan elemen HTML pada halaman web. Kita dapat membuat, memodifikasi, dan menghapus elemen HTML melalui DOM.

 

Berikut adalah cara membuat elemen DOM baru menggunakan JavaScript:

 

1.Menggunakan perintah document.createElement():

  • Inisialisasi elemen baru dengan menggunakan perintah document.createElement() dengan parameter nama elemen HTML yang diinginkan (misalnya: "p", "div", "h1", dll).
  • Atur properti elemen seperti id, class, dll menggunakan perintah elemen.properti = "nilai".
  • Tambahkan elemen baru ke halaman web dengan menggunakan perintah parentElement.appendChild(elemenBaru).

 

2.Menggunakan innerHTML:

  • Pilih elemen HTML yang ingin diubah menggunakan perintah document.getElementById() atau document.querySelector().
  • Ubah isi elemen HTML dengan mengubah properti innerHTML elemen tersebut.
  • Kegunaan dari membuat elemen DOM baru adalah untuk memodifikasi halaman web secara dinamis tanpa harus memuat halaman ulang. Hal ini sangat berguna ketika kita ingin membuat aplikasi web interaktif atau membuat halaman web yang memiliki konten yang bisa diubah tanpa memuat halaman ulang.

 

Berikut adalah contoh sederhana dari membuat elemen DOM baru:         

Dengan menggunakan kode di atas, kita akan menambahkan elemen "p" baru ke halaman web yang berisi teks "Ini adalah elemen baru".

Artikel Lainnya Dengan Kategori Terkait :

1. Belajar Javascript Intermediate #01 Iteration Atau Perulangan Pada Array.

2. Belajar Javascript Intermediate #02 ForEach

3. Belajar Javascript Intermediate #03 Map

4. Belajar Javascript Intermediate #04 Reduce

5. Belajar Javascript Intermediate #05 Filter, Kegunaan Dan Contoh Penggunaanya

6. Belajar Javascript Intermediate #06 Index Of

7. Belajar Javascript Intermediate #07 lastIndexOf

8. Belajar Javascript Intermediate #08 find

9. Belajar Javascript Intermediate #09 findIndex

10. Belajar Javascript Intermediate #10 includes

11. Belajar Javascript Intermediate #11 Array Multidimensi

12. Belajar Javascript Intermediate #12 Membuat Array Multidimensi

13. Belajar Javascript Intermediate #13 Mengakses Array Multidimensi

14. Belajar Javascript Intermediate #14 Looping pada Array Multidimensi

15. Belajar Javascript Intermediate #15 Menambahkan Data Arrya Multidimensi

16. Belajar Javascript Intermediate #16 Mengenal Apa itu Reskursif

17. Belajar Javascript Intermediate #17 Membuat Rekursif

18. Belajar Javascript Intermediate #18 Pengenalan Regex

19. Belajar Javascript Intermediate #19 Regex special character

20. Belajar Javascript Intermediate #20 Match & Flags

21. Belajar Javascript Intermediate #21 Assertion

22. Belajar Javascript Intermediate #22 Shorthans Character Classes

23. Belajar Javascript Intermediate #23 Quantifiers

24. Belajar Javascript Intermediate #24 Group & Ranges

25. Belajar Javascript Intermediate #25 Unicode Property Escapes

26. Belajar Javascript Intermediate #26 Mengenal Module

27. Belajar Javascript Intermediate #27 Export and Import

28. Belajar Javascript Intermediate #28 Export As dan Import As

29. Belajar Javascript Intermediate #29 Export Default

30. Belajar Javascript Intermediate #30 Mengenal OOP

31. Belajar Javascript Intermediate #31 OOP Class

32. Belajar Javascript Intermediate #32 OOP - Inheritance

33. Belajar Javascript Intermediate #33 Polymorphism

34. Belajar Javascript Intermediate #34 Encapsulation

35. Belajar Javascript Intermediate #35 Abstraction

36. Belajar Javascript Intermediate #36 Prototypes-Introduction

37. Belajar Javascript Intermediate #37 Object Prototyping

38. Belajar Javascript Intermediate #38 Data Type Prototyping

39. Belajar Javascript Intermediate #39 Asynchronous-Introduction

40. Belajar Javascript Intermediate #40 Asynchronous-Callback

41. Belajar Javascript Intermediate #41 Asynchronous - Promise

42. Belajar Javascript Intermediate #42 Asynchronous - Promise Instance

43. Belajar Javascript Intermediate #43 Asynchronous - Async/await

44. Belajar Javascript Intermediate #44 Asynchronous - Fetch

45. Belajar Javascript Intermediate #45 DOM - Membuat Elemen

46. Belajar Javascript Intermediate #46 DOM - Menghapus Elemen

47. Belajar Javascript Intermediate #47 DOM - Menambah Elemen Event Listener

48. Belajar Javascript Intermediate #48 DOM - Menghapus Elemen Event Listener

49. Belajar Javascript Intermediate #49 Array Lanjutan - Array of Objects

50. Belajar Javascript Intermediate #50 Mengakses Data Array of Object

51. Belajar Javascript Intermediate #51 Web Storage Introduction

52. Belajar Javascript Intermediate #52 Local Storage - Menyimpan data

53. Belajar Javascript Intermediate #53 Local Storage - Mengambil data

54. Belajar Javascript Intermediate #54 Local Storage - Menghapus data

55. Belajar Javascript Intermediate #55 Mengenal Session Storage

56. Belajar Javascript Intermediate #56 Session Storage - Menyimpan Data

57. Belajar Javascript Intermediate #57 Session Storage - Mengambil Data

58. Belajar Javascript Intermediate #58 Local Storage - Menghapus data

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya