piątek,
JS: Tworzenie i usuwanie elementów DOM
JavaScript pozwala na tworzenie i usuwanie elementów DOM. Dzięki temu dynamiczne dodawanie, modyfikowanie i usuwanie treści nie wymaga przeładowywania strony.
Tworzenie Elementów
Utwórz Nowy Element:
Użyj metody document.createElement() do stworzenia nowego elementu.
var nowyDiv = document.createElement("div");
Dodaj treść do elementu
Możesz dodać tekst lub inne elementy do utworzonego elementu.
nowyDiv.textContent = "Witaj świecie!";
// Lub używając innerHTML
nowyDiv.innerHTML = "Witaj świecie!";
Wstaw element do DOM
Wybierz element nadrzędny i użyj metod takich jak appendChild() lub insertBefore(), aby dodać nowy element do drzewa DOM.
document.body.appendChild(nowyDiv); // Dodaje nowyDiv na końcu body
Usuwanie Elementów
Usuń istniejący element
Użyj metody removeChild() na elemencie nadrzędnym, aby usunąć określony element.
var elementDoUsuniecia = document.getElementById("elementId");
elementDoUsuniecia.parentNode.removeChild(elementDoUsuniecia);
Usuwanie elementu bezpośrednio
W nowszych wersjach JavaScript możesz użyć metody remove() bezpośrednio na elemencie, który chcesz usunąć.
document.getElementById("elementId").remove();
Kompletne przykłady
// Tworzenie nowego elementu paragrafu
var nowyP = document.createElement("p");
nowyP.textContent = "To jest nowy paragraf.";
// Dodawanie nowego paragrafu do istniejącego diva
var kontener = document.getElementById("kontener");
kontener.appendChild(nowyP);
// Usuwanie paragrafu
kontener.removeChild(nowyP); // Stary sposób
// lub
nowyP.remove(); // Nowy sposób
Dowiedz się więcej…
JavaScript oferuje wiele metod do manipulacji elementami, w tym ustawiania atrybutów (setAttribute), dodawania klas (classList.add) i wiele innych, co pozwala na tworzenie bogatych interakcji użytkownika.
