CodeGym/Kursy/Frontend SELF PL/Tworzenie i usuwanie elementów DOM

Tworzenie i usuwanie elementów DOM

Dostępny

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:

JavaScript
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:

JavaScript
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:

JavaScript
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
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
  </body>
</html>
JavaScript
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
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is a old div element</div>
    <p>This is a paragraph</p>
  </body>
</html>
JavaScript
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
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
  </body>
</html>
JavaScript
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
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>This is an old div element</div>
  </body>
</html>
JavaScript
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
<html>
  <head>
    <style>
1
Zadanie
Frontend SELF PL,  poziom 41lekcja 2
Niedostępne
Nowy akapit
Nowy akapit
1
Zadanie
Frontend SELF PL,  poziom 41lekcja 2
Niedostępne
Wstawienie elementu
Wstawienie elementu
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy