Edycja styli i dodawanie elementów w DOM

Dzięki JavaScript możesz dynamicznie modyfikować style elementów na stronie, a także tworzyć i usuwać nowe elementy HTML. Jest to niezbędne przy tworzeniu interaktywnych i responsywnych aplikacji webowych.

Edycja styli elementów

• Zmiana właściwości przez element.style
  • Możesz ustawić styl wprost, np. element.style.color = "red";
• Dodawanie/usuwanie klas
  • Przez element.classList.add("nazwaKlasy"); lub element.classList.remove("nazwaKlasy");
• Zamiana całego stylu
  • Niekiedy używa się element.setAttribute("style", "background-color: yellow;"), ale jest to mniej elastyczne.

const box = document.getElementById('box');
box.style.backgroundColor = "blue"; // Zmiana koloru tła na niebieski
box.classList.add("highlight");     // Dodanie klasy "highlight"

Dodawanie nowych elementów do DOM

• createElement
  • Tworzysz nowy element, np. const newDiv = document.createElement("div");
• Tworzenie zawartości (textContent / innerHTML)
  • newDiv.textContent = "Jestem nowym divem!";
• appendChild / append
  • Dodajesz element do innego elementu (np. do body lub div#container), np. document.body.appendChild(newDiv);
• insertBefore
  • Pozwala wstawić przed konkretnym elementem, jeśli chcesz określić dokładne miejsce wstawienia.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

• Edycja styli może polegać na bezpośrednim ustawianiu właściwości (element.style.backgroundColor) albo dodawaniu/usuwaniu klas (.classList.add/remove).
• Dodawanie elementów do DOM to stworzenie elementu (createElement) i dołączenie go do rodzica (appendChild).
• Dynamika w interfejsach webowych wynika głównie z możliwości modyfikacji struktury i stylów HTML w czasie rzeczywistym – to podstawa interaktywnych aplikacji JavaScript.