Satu-satunya parameter yang kami berikan ke metode ini adalah jenis elemen yang akan dibuat (div dalam contoh)
Metode createElement_ mengembalikan elemen yang baru dibuat
Kami menggunakan metode setAttribute untuk mengatur beberapa atribut pada elemen
const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el);
Metode const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 0 membutuhkan 2 parameter
- const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 1 - nama atribut yang nilainya akan ditetapkan
- const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 2 - nilai yang akan diberikan ke atribut
Merupakan praktik terbaik untuk menyetel atribut const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); _3, seperti const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 4, ke string kosong. Selama atribut boolean disetel ke nilai apa pun, atribut tersebut berlaku
Jika atribut sudah ada pada elemen, nilainya diperbarui, jika tidak, atribut baru ditambahkan dengan nama dan nilai yang ditentukan
Jika Anda perlu menambahkan gaya ke elemen, gunakan objek const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 5 sebagai gantinya
const el = document.createElement('div'); el.style.backgroundColor = 'salmon'; el.style.color = 'white'; el.style.width = '150px'; el.style.height = '150px'; el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el);
Perhatikan bahwa nama gaya multi-kata menggunakan huruf unta saat diakses pada objek const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 5
Anda dapat menggunakan properti textContent untuk menyetel konten teks elemen atau properti innerHTML untuk menyetel markup HTML dalam elemen
Anda tidak boleh menggunakan properti const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); _7 dengan data yang diberikan pengguna tanpa menghindarinya. Ini akan membuat aplikasi Anda rentan terhadap serangan skrip lintas situs
Anda dapat menggunakan metode appendChild untuk menambahkan elemen ke halaman
Metode menambahkan node ke akhir daftar anak dari elemen yang dipanggil
Jika saya memuat halaman dari contoh, saya dapat melihat bahwa atribut const el = document.createElement('div'); el.setAttribute('id', 'my-id'); el.setAttribute('title', 'my-title'); el.setAttribute('disabled', ''); el.textContent = 'Hello world'; const box = document.getElementById('box'); box.appendChild(el); 5 berhasil disetel pada elemen
Ringkasan. dalam tutorial ini, Anda akan mempelajari cara mendapatkan nilai atribut suatu elemen menggunakan metode getAttribute()
Untuk mendapatkan nilai atribut suatu elemen, Anda menggunakan metode getAttribute()
let attributeValue = element.getAttribute(attributeName);
Code language: JavaScript (javascript)Misalnya, untuk mendapatkan nilai atribut title dari elemen jangkar, Anda menggunakan kode berikut
const link = document.querySelector('a'); let title = link.getAttribute('title');
Code language: JavaScript (javascript)Dimungkinkan untuk menggunakan metode getAttribute() untuk mendapatkan atribut data-*. Misalnya
<a href="/api" data-method="post">Save</a>
Code language: HTML, XML (xml)Untuk mendapatkan nilai atribut data-method_ dari elemen anchor, Anda menggunakan metode getAttribute() sebagai berikut