DOM Elemente erzeugen und mit CSS versehen.

let elementMain = document.getElementById("main");
let box = document.createElement("div");
box.innerHTML = "ich bin die neue Box";
elementMain.appendChild(box);

Mittels createElement() wird ein Element erzeugt. Die Methode erwartet als Parameter den Namen des Elements, welches erstellt werden soll. Die Methode gibt das Element zurück. Dadurch wird das Element aber noch nicht dem DOM hinzugefügt.

Für das Hinzufügen gibt es verschiedene Methoden. Alle 3 Methoden werden über das Elternelement aufgerufen.

insertBefore()

Es wird ein neues Geschwisterelement vor einem Element erzeugt. Als Parameter wird zuerst das neue Element erwartet und als zweites Argument das Kindelement vor dem das neue Element eingefügt wird. Beispiel

appendChild()

Es ist das letzte Kindelement eines Elternelements. Der Paramater ist das neue Element. Beispiel

replaceChild()

Ein bestehendes Kindelement wird durch ein neues Kindelement ersetzt. Der erste Parameter ist das neue Element. Der zweite Parameter ist Element welches ersetzt wird. Beispiel

 

Beispiel 2

Hier wird ein Element log mittels createElement() erzeugt.

Dann werden dem Element log verschiedene Style Anweisungen zugewiesen.

Mit document.body.appendChild(); wird es dem Dokument hinzugefügt und zwar als letztes Kindelement.

Ein weiteres Element message wird erzeugt, darin ein Text erzeugt und es dann als Kindelement von log angehängt. Die Eigenschaft textContent enthält reinen Text ohne eventuell vorhandenes Markup. Im Gegensatz zu innerHTML mit dem sich auch Html-Auszeichnungen einfügen oder ausgeben lassen.

 

Beispiel

 var log = document.createElement('div');
  log.style.height= '75px';
  log.style.width = '300px';
  log.style.overflow = 'auto';
  log.style.border = '1px solid #666';
  log.style.backgroundColor = '#ccc';
  log.style.padding ='8px';
  log.style.position ='absolute';
  log.style.bottom = '10px';
  log.style.right = '20px';
  document.body.appendChild(log);
  
  var message = document.createElement('div');
  message.textContent = 'Hallo mein Name ist Hase';
 message = document.createElement('div');
	message.textContent = 'ich weiß von nichts';
  log.appendChild(message);

 

Zurück DOM	nächste Seite
Javascript Tipps