Elemen html dengan atribut javascript

Question

Satu-satunya parameter yang kami berikan ke metode ini adalah jenis elemen yang akan dibuat (div dalam contoh)

Table of Contents Show

Bagaimana Anda bisa menambahkan atribut HTML ke elemen HTML menggunakan JavaScript?
Bagaimana cara mendapatkan elemen dengan atribut di JavaScript?
Bagaimana cara mendapatkan nilai atribut HTML dalam JavaScript?
Bagaimana Anda bisa mengakses elemen HTML dengan JavaScript?

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

Bagaimana Anda bisa menambahkan atribut HTML ke elemen HTML menggunakan JavaScript?

Elemen. setAttribute() Menetapkan nilai atribut pada elemen yang ditentukan. Jika atribut sudah ada, nilainya diperbarui; . Untuk mendapatkan nilai atribut saat ini, gunakan getAttribute() ; .

Bagaimana cara mendapatkan elemen dengan atribut di JavaScript?

Untuk mendapatkan elemen berdasarkan atribut, metode “ querySelector()” digunakan . Ini mengembalikan elemen pertama dokumen yang cocok dengan atribut tertentu. Metode ini memilih tag tertentu dengan nilai atribut tertentu.

Bagaimana cara mendapatkan nilai atribut HTML dalam JavaScript?

JavaScript metode getAttribute() . Jika atributnya ada, ia mengembalikan string yang mewakili nilai atribut yang sesuai. Jika atribut yang sesuai tidak ada, itu akan mengembalikan string kosong atau nol.