Bahagia itu kesetiaan, setia karena indahnya rasa cukup, setia karena indahnya berbagi, setia karena indahnya ketulusan dalam berbuat kebaikan. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada anda tentang cara menambahkan After dengan InsertAfter
Biasanya kami buat setelahnya. dengan CSS. Tapi kali ini kita akan membuat after. menggunakan jQuery. Nah disini saya akan memberitahu caranya. Oke langsung saja berikut cara menambahkan After dengan InsertAfter
Seperti biasa, pertama-tama siapkan file index. html-nya
Kemudian, isi tag-tag HTML berikut
Dan kemudian, isi Javascript
Bagaimana kabarmu teman-teman?
Itu saja untuk tutorial ini tentang cara Menambahkan After dengan InsertAfter
Semoga bermanfaat, terima kasih
Javascript DOM (Document Object Model) adalah antarmuka yang memungkinkan pengembang memanipulasi konten, struktur, dan gaya situs web. Jika Anda ingin mempelajari lebih lanjut tentang DOM dan cara memanipulasinya menggunakan Javascript, berikut adalah referensi dasar menurut Gabriel Tanner
Definisi DOM
Pada tingkat paling dasar, sebuah situs web terdiri dari dokumen HTML dan CSS. Browser membuat representasi dokumen yang dikenal sebagai Document Object Model (DOM). Dokumen ini mengizinkan Javascript untuk mengakses dan memanipulasi elemen dan gaya situs web. Model ini dibangun dalam struktur objek dan mendefinisikan
- elemen HTML sebagai objek
- Properti dan acara elemen HTML
- Metode untuk mengakses elemen HTML
Elemen-elemen di atas disebut node. Tidak hanya elemen yang mendapatkan node tetapi atribut elemen dan teks juga mendapatkan nodenya masing-masing, yaitu atribut-node dan text-node
Dokumen DOM
Document DOM adalah seluruh objek yang ada di website Anda. Jika Anda ingin mengakses objek apa pun di halaman web Anda, Anda harus selalu memulai dengan dokumen. Karena ada banyak properti dan metode penting yang dapat Anda gunakan untuk mengakses dan memodifikasi situs web Anda
Cara Mendapatkan Elemen HTML
Mendapat elemen dengan ID
Metode getElementById() digunakan untuk mendapatkan satu elemen dengan idnya. Mari kita lihat sebuah contoh
var title = document.getElementById(‘header-title’);Di sini kita mendapatkan elemen dengan id header-title dan menyimpannya ke dalam sebuah variabel
Mendapat elemen dengan nama kelas
Kita juga bisa mendapatkan lebih dari satu objek dengan menggunakan metode getElementsByClassName()
var items = document.getElementsByClassName(‘list-items’);_Di sini kita mendapatkan semua item dengan kelas list-items dan menyimpannya dalam sebuah variabel
Mendapat elemen dengan nama tag
Kita juga bisa mendapatkan elemen kita dengan nama tag menggunakan metode getElementsByTagName()
var listItems = document.getElementsByTagName(‘li’);Di sini kita mendapatkan semua elemen li dari dokumen HTML kita dan menyimpannya ke dalam sebuah variabel
pemilih kueri
Metode querySelector() mengembalikan elemen pertama yang cocok dengan pemilih CSS yang ditentukan. Itu berarti Anda bisa mendapatkan elemen dengan id, kelas, tag, dan semua pemilih CSS yang valid. Berikut adalah daftar dari beberapa pilihan yang paling populer
Dapatkan dengan id
var header = document.querySelector(‘#header’)Dapatkan berdasarkan kelas
var items = document.querySelector(‘.list-items’)_Dapatkan dengan tag
var headings = document.querySelector(‘h1’);Dapatkan elemen yang lebih spesifik
Kita juga bisa mendapatkan elemen yang lebih spesifik menggunakan CSS Selector
document.querySelector(“h1.heading”);_Dalam contoh ini kami mencari tag dan kelas bersama-sama dan mengembalikan elemen pertama yang melewati Pemilih CSS
Queryselectorall
Metode querySelectorAll() persis sama dengan metode querySelector() kecuali metode ini mengembalikan semua elemen yang cocok dengan CSS Selector
var heading = document.querySelectorAll(‘h1.heading’);Dalam contoh ini, kita mendapatkan semua tag h1 yang memiliki kelas heading dan menyimpannya dalam sebuah array
Memodifikasi Elemen HTML
HTML DOM memungkinkan kita mengubah konten dan gaya elemen HTML dengan mengubah propertinya
Ubah HTML
Properti innerHTML dapat digunakan untuk mengubah konten elemen HTML
document.getElementById(“#header”).innerHTML = “Hello World!”;_Dalam contoh ini kita mendapatkan elemen dengan header id dan menyetel konten bagian dalam menjadi “Hello World. ”
InnerHTML juga dapat digunakan untuk menempatkan tag di dalam tag lain
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"_Di sini kami meletakkan tag h1 ke semua div yang ada
Ubah nilai atribut
Anda juga dapat mengubah nilai atribut menggunakan DOM
var items = document.getElementsByClassName(‘list-items’);_0Dalam contoh ini kita mengubah src dari semua tag menjadi test.jpg.
Ubah gaya
Untuk mengubah gaya elemen HTML, kita perlu mengubah properti gaya elemen kita. Berikut adalah contoh sintaks untuk mengubah gaya
var items = document.getElementsByClassName(‘list-items’);_1Sekarang mari kita lihat contoh di mana kita mendapatkan elemen dan mengubah batas bawah menjadi garis hitam pekat
var items = document.getElementsByClassName(‘list-items’);_2Properti CSS harus ditulis dalam huruf unta, bukan nama properti css biasa. Dalam contoh ini kami menggunakan borderBottom
Menambah dan menghapus elemen
Sekarang kita akan melihat bagaimana kita dapat menambahkan elemen baru dan menghapus elemen yang sudah ada
Menambahkan elemen
Berikut adalah contoh sintaks untuk menambahkan elemen
var items = document.getElementsByClassName(‘list-items’);_3Di sini kita hanya membuat elemen div menggunakan metode createElement() yang mengambil tagname sebagai parameter dan menyimpannya dalam sebuah variabel. Setelah itu kita hanya perlu menyediakan beberapa konten lalu memasukkannya ke dalam dokumen DOM kita
var items = document.getElementsByClassName(‘list-items’);_4Di sini kita membuat konten menggunakan metode createTextNode() yang menggunakan String sebagai parameter dan kemudian kita menyisipkan elemen div baru sebelum div yang ada di dokumen kita
Hapus sebuah elemen
Berikut adalah contoh sintaks untuk menghapus elemen
var items = document.getElementsByClassName(‘list-items’);_5Di sini kita mendapatkan elemen dan menghapusnya menggunakan metode removeChild()
Ganti elemen
Berikut adalah contoh sintaks untuk mengganti elemen
var items = document.getElementsByClassName(‘list-items’);_6Di sini kita dapat mengganti elemen menggunakan metode replaceChild(). Argumen pertama adalah elemen baru dan argumen kedua adalah elemen yang ingin kita ganti
Menulis langsung ke aliran keluaran HTML
Kita juga dapat menulis ekspresi HTML dan JavaScript langsung ke aliran keluaran HTML menggunakan metode write()
var items = document.getElementsByClassName(‘list-items’);_7Kami juga dapat mengirimkan ekspresi JavaScript seperti objek tanggal
var items = document.getElementsByClassName(‘list-items’);_8Metode write() juga dapat mengambil beberapa argumen yang akan ditambahkan ke dokumen saat muncul
Penangan Acara
DOM HTML juga memungkinkan Javascript untuk bereaksi terhadap peristiwa HTML. Berikut adalah daftar dari beberapa yang paling penting
- klik mouse
- pemuatan halaman
- gerakan tikus
- perubahan kolom input
Tetapkan Acara
Anda dapat menentukan peristiwa secara langsung dalam kode HTML Anda dengan menggunakan atribut pada tag Anda. Berikut adalah contoh acara title
var items = document.getElementsByClassName(‘list-items’);_9Dalam contoh ini, teks
akan berubah menjadi “Halo!” Saat Anda mengklik tombol.
Anda juga dapat memanggil fungsi saat suatu peristiwa dipicu seperti yang Anda lihat pada contoh berikut
var listItems = document.getElementsByTagName(‘li’);0Di sini kita memanggil metode changeText() saat tombol diklik dan meneruskan elemen sebagai atribut
Kami juga dapat mengatur acara yang sama dalam kode Javascript kami
Tetapkan Pendengar Acara
Berikut ini adalah contoh sintaks untuk menentukan event listener ke elemen HTML
var listItems = document.getElementsByTagName(‘li’);2Di sini kita hanya mengatur clickevent yang memanggil metode runEvent saat elemen 'btn' Anda diklik
Anda juga dapat menetapkan beberapa acara ke satu elemen
var listItems = document.getElementsByTagName(‘li’);_3Hubungan Node
Node dalam Document DOM memiliki hubungan hierarkis satu sama lain, terstruktur seperti pohon. Di sini kita menggunakan istilah parent, sibling, dan child untuk menggambarkan hubungan antar node
Node paling atas disebut root dan merupakan satu-satunya node yang tidak memiliki parent. Root dalam dokumen HTML normal adalah tag karena tidak memiliki parent dan merupakan tag teratas di dokumen.
Menavigasi Antar Node
Kita dapat menavigasi antar node menggunakan properti berikut
- parentNode
- childNodes
- anak pertama
- anak terakhir
- saudara berikutnya
Berikut adalah contoh bagaimana Anda bisa mendapatkan elemen induk dari h1
var listItems = document.getElementsByTagName(‘li’);_4Nah, bagaimana pengenalan JavaScript DOM kali ini?
Jika Anda tertarik untuk belajar tentang pemrograman website atau ingin menjadi web developer, Anda bisa mendaftarkan diri di tempat magang atau kerja Techarea