3.1 Tworzenie elementów
Praca z DOM (Document Object Model) to nie tylko nawigacja po istniejących elementach, ale także tworzenie nowych elementów, ich wstawianie do dokumentu i usuwanie. Teraz omówimy różne metody i podejścia do tworzenia i usuwania elementów w DOM.
Metoda document.createElement()
Główna metoda do tworzenia nowego elementu w DOM to document.createElement(). Ta metoda przyjmuje
nazwę tagu elementu, który chcemy utworzyć, i zwraca nowy, pusty element.
Przykład:
const newDiv = document.createElement('div');
Dodawanie zawartości do elementu
Po utworzeniu nowego elementu możesz wypełnić go zawartością. Może to być tekst, inne elementy lub kombinacja obu.
Przykład:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
Możesz również użyć właściwości innerHTML, aby dodać zawartość HTML.
Przykład:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Wstawianie elementów do DOM
Utworzony element trzeba dodać do dokumentu. Istnieje kilka metod wstawiania elementów do DOM:
1. Metoda appendChild()
Metoda appendChild() dodaje element na końcu listy dzieci wskazanego elementu nadrzędnego.
Przykład:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Metoda insertBefore()
Metoda insertBefore() dodaje element przed wskazanym elementem dziecięcym elementu nadrzędnego.
Przykład:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Metoda append()
Metoda append() dodaje jeden lub więcej węzłów lub stringów na końcu listy dzieci wskazanego elementu nadrzędnego.
Przykład:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Metoda prepend()
Metoda prepend() dodaje jeden lub więcej węzłów lub stringów na początku listy dzieci wskazanego elementu nadrzędnego.
Przykład:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Klonowanie elementów
Metoda cloneNode() pozwala skopiować element. Klonowanie może być głębokie (kopiuje wszystkie elementy dziecięce) lub płytkie (tylko sam element).
Przykład głębokiego klonowania:
<html>
<head>
<style>
GO TO FULL VERSION