0Pricing
Frontend Academy · Lekcja

Tworzenie i dołączanie elementów

Używaj createElement, setAttribute, append i remove do dynamicznego budowania oraz modyfikowania struktury DOM.

Tworzenie i dołączanie elementów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

createElement

document.createElement(tagName) tworzy nowy element w pamięci — nie znajduje się on jeszcze w DOM. Następnie ustawia się jego właściwości i dołącza go do drzewa.

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 i appendChild

parent.append(child) dodaje węzeł lub ciąg znaków na końcu elementów potomnych parent. appendChild to starszy odpowiednik, ale append jest bardziej elastyczne — przyjmuje wiele węzłów i ciągów znaków.

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

prepend, before, after

parent.prepend() dodaje element na początku. element.before() wstawia element przed danym elementem. element.after() wstawia element za nim.

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) wstawia kod HTML w określonym miejscu bez zastępowania istniejącej zawartości. Dostępne pozycje: '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) tworzy głęboką kopię elementu wraz ze wszystkimi jego elementami potomnymi. Przekazanie wartości false tworzy kopię płytką. Jest to przydatne do powielania elementów szablonu.

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

removeChild i remove()

element.remove() usuwa element z DOM-u. Starsza metoda parent.removeChild(child) również działa. Usunięte elementy nadal mogą być przechowywane w zmiennych i ponownie dodawane do DOM-u.

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

replaceWith

oldElement.replaceWith(newElement) zastępuje stary element w DOM-ie nowym elementem. Jest wygodniejsza niż starszy wzorzec replaceChild.

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

DocumentFragment do zbiorczego wstawiania

DocumentFragment to lekki kontener, który nie istnieje w DOM-ie. Należy zbudować w nim poddrzewo, a następnie dodać je za pomocą jednej operacji — powoduje to tylko jedno ponowne przeliczenie układu zamiast 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);

Element &lt;template&gt;

Element HTML <template> przechowuje kod znaczników, który nie jest renderowany, dopóki nie zostanie sklonowany za pomocą JavaScriptu. Jest lepszy niż tworzenie ciągów znaków lub klonowanie widocznych elementów.

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

Ustawianie właściwości a atrybutów

Właściwości elementów (el.href, el.src, el.value) są często najbardziej bezpośrednim i wydajnym sposobem ustawiania wartości. Atrybuty (setAttribute) najlepiej stosować w przypadku niestandardowych atrybutów lub atrybutów ARIA, które nie mają odpowiadającej im właściwości DOM.

// 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');

Unikanie innerHTML w przypadku treści użytkownika

Podczas tworzenia elementów na podstawie danych dostarczonych przez użytkownika należy zawsze używać metod DOM (createElement, textContent, setAttribute), zamiast tworzyć ciąg HTML i używać innerHTML. Nigdy nie należy wstawiać danych wejściowych użytkownika do ciągów HTML.

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

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

Szybkie sprawdzenie

Należy dodać 100 elementów listy do <ul> bez powodowania 100 ponownych przeliczeń układu. Które podejście będzie najlepsze?

Podsumowanie: tworzenie elementów DOM

createElement tworzy element w pamięci. append/prepend/before/after wstawiają go do drzewa. remove() usuwa element. DocumentFragment umożliwia zbiorcze wstawianie, zwiększając wydajność. Element