PricingLoginStart free
Frontend Academy · Pelajaran

Mencipta dan Menambahkan Elemen

Gunakan createElement, setAttribute, append dan remove untuk membina serta mengubah suai struktur DOM secara dinamik.

Pelajaran 4 daripada 413 langkah

Mencipta dan Menambahkan Elemen ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

createElement

document.createElement(tagName) mencipta elemen baharu dalam memori — elemen itu belum berada dalam DOM. Kemudian, tetapkan sifatnya dan gunakan append untuk menambahkannya pada pepohon.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append dan appendChild

parent.append(child) menambah nod atau rentetan pada penghujung anak parent. appendChild ialah padanan yang lebih lama, tetapi append lebih fleksibel — ia menerima berbilang nod dan rentetan.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, sebelum, after

parent.prepend() menambah pada permulaan. element.before() menyisipkan sebelum elemen. element.after() menyisipkan selepasnya.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) menyisipkan HTML pada kedudukan yang ditentukan tanpa menggantikan kandungan sedia ada. Kedudukan: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) mencipta salinan mendalam bagi elemen termasuk semua anaknya. Hantar false untuk salinan cetek. Berguna untuk menduplikasi elemen template.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild dan remove()

element.remove() membuang elemen daripada DOM. parent.removeChild(child) yang lebih lama juga berfungsi. Elemen yang dibuang masih boleh dirujuk dalam pemboleh ubah dan ditambah semula.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) menggantikan elemen lama dalam DOM dengan elemen baharu. Lebih mudah berbanding corak replaceChild yang lebih lama.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment untuk Sisipan Kelompok

DocumentFragment ialah container ringan yang tidak wujud dalam DOM. Bina subpokok di dalamnya, kemudian tambahkan semuanya dalam satu operasi — ini hanya menyebabkan satu penyusunan semula dan bukannya N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

Elemen &lt;template&gt;

Elemen HTML <template> menyimpan penanda yang tidak dipaparkan sehingga diklon dengan JavaScript. Lebih baik daripada membina rentetan atau mengklon elemen yang kelihatan.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Menetapkan Sifat Berbanding Atribut

Sifat elemen (el.href, el.src, el.value) selalunya merupakan cara paling langsung dan berprestasi tinggi untuk menetapkan nilai. Atribut (setAttribute) paling sesuai untuk atribut tersuai atau ARIA yang tidak mempunyai sifat DOM sepadan.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Mengelakkan innerHTML dengan Kandungan Pengguna

Semasa membina elemen daripada data yang diberikan pengguna, sentiasa gunakan kaedah DOM (createElement, textContent, setAttribute) dan bukannya membina rentetan HTML lalu menggunakan innerHTML. Jangan sesekali memasukkan masukan pengguna ke dalam rentetan HTML.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Semakan Pantas

Anda perlu menambah 100 item senarai ke dalam <ul> tanpa menyebabkan 100 penyusunan semula. Pendekatan manakah yang terbaik?

Jawab dalam pelajaran interaktif

Imbas Kembali: Mencipta Elemen DOM

createElement mencipta dalam memori. append/prepend/before/after menyisipkan ke dalam pepohon. remove() memadamkan elemen. DocumentFragment mengumpulkan sisipan demi prestasi. Elemen