Creating HTML Elements

Mit createElement können wir neue Elemente erstellen, die wir später im DOM einfügen.

createElement

createElement akzeptiert einen Wert – den HTML-Tag des Elements, das wir erstellen wollen.

const paragraph = document.createElement('p');

Nachdem wir das Element erstellt haben, können wir Attribute und Inhalte hinzufügen. (Das geht leider nicht in einem Schritt.)

paragraph.classList.add('red');
paragraph.textContent = `I'm red!`

Adding elements to the DOM

Wir können zwei Methoden nutzen, um Elemente zum DOM hinzuzufügen:

• appendChild
• insertBefore

appendChild

appendChild ist eine Methode eines Elements, und damit können wir diesem Element unser neu erstelltes Element als letztes Kindelement anhängen. appendChild nimmt ein Argument entgegen – das Element, das angehängt werden soll. Beachte dabei die Eltern-Kind-Beziehung!

parentElement.appendChild(newElement);

Wir wollen an die folgende Liste Strawberries anhängen.

<ol>
  <li>Banana</li>
  <li>Pineapple</li>
  <li>Orange</li>
</ol>

// 1. Listenelement für Strawberries erstellen:
const strawberries = document.createElement('li');

// 2. Inhalt für das Listenelement definieren:
strawberries.textContent = 'Strawberries';

// 3. wir brauchen nun das parentElement (list) ...
const list = document.querySelector('ol');

// 4. ... dann fügen wir Strawberries am Ende ein:
list.appendChild(strawberries);

Caution

Wenn das Element, das eingefügt werden soll, zufällig schon auf der Seite existiert, wird das Element einfach verschoben. Das wollen wir allerdings vermeiden! In so einem Fall sollte das Element zuerst gelöscht und dann neu eingefügt werden. Siehe auch Node: appendChild() method on MDN - Abgrenzung zu Element.append()

insertBefore

insertBefore fügt ein Element vor einem anderen Element ein. Die Syntax sieht so aus:

• newElement ist das neue Element, das wir einfügen wollen
• referenceElement sagt dem Browser, wo das neue Element eingefügt werden soll - vor referenceElement.

parentElement.insertBefore(newElement, referenceElement);

Wenn wir die Strawberries als erstes Listenelement einfügen wollen, müssen wir Banana als Referenzelement definieren:

<ol>
  <li>Banana</li>
  <li>Pineapple</li>
  <li>Orange</li>
</ol>

// 1. Listenelement für Strawberries erstellen:
const strawberries = document.createElement('li');

// 2. Inhalt für das Listenelement definieren:
strawberries.textContent = 'Strawberries';

// 3. wir brauchen nun das parentElement (list) ...
const list = document.querySelector('ol');

// 4. ... und das Referenzelement (banana):
const banana = list.firstElementChild;

// 5. dann fügen wir Strawberries vor dem Referenzelement ein:
list.insertBefore(strawberries, banana);

Adding multiple elements to the DOM

appendChild und insertBefore sind keine ressourcenfreundlichen Methoden, da alles, was nach dem eingefügten Element im DOM nachfolgt, repainted werden muss (= das DOM muss sich also aktualisieren (reload ist das aber nicht, oder?)).

Es gibt bessere Methoden:

• das innerHTML ersetzen
• ein document Fragment anhängen

Replacing innerHTML

Mit innerHTML können mehrere Elemente auf einmal geändert werden. Wir können das HTML direkt schreiben. Beispiel: auf einer Seite soll eine Liste eingefügt werden. Im HTML bereiten wir ein leeres <ol> vor (dann müssen wir es nicht extra in JavaScript erstellen), das dann mit einem Template Literal befüllt wird:

<ol></ol>

const ol = document.querySelector('ol')
ol.innerHTML = `
  <li>Addy Osmani</li>
  <li>Vitaly Friedman</li>
  <li>Chris Coyier</li>
`;

Manipulating arrays into an HTML string

Nun ist diese Methode nicht sonderlich elegant. Falls wir es mit einer Liste zu tun haben, werden die Elemente meistens in einem Array vorliegen:

const devs = ['Addy Osmani', ' Vitaly Friedman', 'Chris Coyer'];

Um einen HTML String zu erstellen, können wir die Array-Methoden map und join benutzen.

• Im ersten Schritt mappen wir die Elemente auf Listenpunkte mit map
• Im zweiten Schritt kümmern wir uns um die Trennelemente mit join

const devList = devs.map(dev => `<li>${dev}</li>`).join('');
ol.innerHTML = devList;

What if you have existing items in the list?

Theoretisch kann man den neu generierten String einfach zum bestehenden hinzufügen:

ol.innerHTML = ol.innerHTML + devList;

Der Nachteil ist, dass dabei die gesamte Liste im DOM ersetzt wird, obwohl sich nur ein Teil geändert hat. Das wollen wir eigentlich vermeiden.
Ein besserer Ansatz ist es, ein document fragment zu verwenden.

Using a document fragment

Ein document fragment ist quasi ein separates DOM, das nur in JavaScript existiert. Es funktioniert genauso wie das DOM.

Um ein document fragment zu erstellen, verwenden wir createDocumentFragment.

const fragment = document.createDocumentFragment();

Ein document fragment kann wie das DOM behandelt werden, d.h., man kann z.B. die Methoden appendChild und insertBefore verwenden. Diese Methoden wirken sich so lange nicht auf das DOM aus, bis das document fragment selbst ins DOM eingefügt wird.

// solange wir das machen, ändert sich im DOM gar nichts:
devs.forEach(dev => {
  const li = document.createElement('li');
  li.innerHTML = dev;
  fragment.appendChild(li);
});

// JETZT hängen wir das fragment ins DOM:
ol.appendChild(fragment);
// die Liste wird nicht ersetzt, nur die neuen Elemente werden am Ende eingefügt

Removing elements from the DOM

parentElement.removeChild(newElement, referenceElement);