Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

JavaScript/Tutorials/DOM/DOM-Manipulation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10-15min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Kenntnisse in
● HTML
● JavaScript

Wenn ein Anwender mit der Webseite interagiert, ist es oft nötig, je nach erfolgter Eingabe unterschiedliche Inhalte zur Verfügung zu stellen. So könnte bei einem Login für neue Nutzer ein Anmeldeformular eingeblendet werden. Wenn der Benutzer schon registriert ist, kann er nach dem Einloggen einfach weitermachen, für neue Benutzer werden je nach Stand der Eingabe unterschiedliche Inhalte dynamisch nachgeladen.

Elemente dynamisch erzeugen[Bearbeiten]

Gerade bei Spielen wird das Spielfeld oft erst geladen, wenn der Benutzer die Spielanleitung oder den bisherigen Punktestand (Highscore) gelesen hat, da das Hin- und Herklicken zwischen verschiedenen Webseiten zu umständlich wäre.

Hierfür können Sie Inhalte dynamisch ausgeben, indem Sie HTML-Elemente erzeugen, mit Inhalt füllen und in das DOM der Webseite einhängen:


Beispiel ansehen …
<button id="button">Drück mich!</button>
<div id="textblock">
   <p>Dies ist ein Textblock, dem dynamisch weitere Absätze angehängt werden können.</p>
</div>
Die Webseite enthält einen Button und ein div, in dem sich ein Textabsatz befindet.
document.addEventListener('DOMContentLoaded', function () {

  var text = 'Dies ist ein neuer Absatz'; 
 
  document.getElementById('button').addEventListener('click', createElement);

  function createElement(){
    var container = document.getElementById('textblock');
    var newElm = document.createElement('p');
    newElm.innerText = text;
    container.appendChild(newElm);
  }
 
});
Das Script ruft auf Klick die Funktion createElement() auf.

Dies erzeugt mit createElement ein neues p-Element und weist es der Variablen newElm zu. Dem Absatz wird mit innerText eine in der Variablen text enthaltenen Zeichenkette als Textknoten an das Element hinzugefügt. Anschließend wird das so dynamisch erzeugte Element mit appendChild in das DOM eingehängt.

Wenn Sie es mit der Konsole untersuchen, werden Sie keinen Unterschied zu normalen Textabsätzen finden.

eine Helferfunktion für neue Elemente[Bearbeiten]

Mit der oberen Funktion konnten neue Absätze erzeugt werden. Für den Alltagseinsatz benötigt man aber eine Helfer-Funktion, mit der beliebige neue Elemente an beliebigen Stellen im DOM erzeugt werden.

Beispiel ansehen …
document.addEventListener('DOMContentLoaded', function () {

  var text1 = 'Dies ist ein neuer Absatz!'; 
  var text2 = 'Dies ist ein neuer Button!';   

 
  document.getElementById('button1').addEventListener('click', function() {
    createElement('#textblock', 'p',text1);});
  document.getElementById('button2').addEventListener('click', function() {
    createElement('#textblock', 'button',text2);});	

  function createElement(parent,elem, content){
    var container = document.querySelector(parent);
    var newElm  = document.createElement(elem);
    newElm .innerText = content;
    container.appendChild(newElm );
  }
 
});
Die Funktion createElement() wurde jetzt so erweitert, dass ihr Parameter übergeben werden können.

Beim Anhängen der Event-Handler wird addEventListener als zweiter Parameter eine anonyme Funktion übergeben, in unsere Parameter gekapselt sind.

  • Der erste Parameter parent bestimmt, an welcher Stelle im Elementbaum das neue Element eingehängt wird.
  • elem legt fest, welches Element erzeugt wird.
  • content übergibt einen Inhalt, der dann als Textknoten eingefügt wird.

Ein Manko dieser Helferfunktion ist die fehlende Möglichkeit, weitere Klassen und Attribute festzulegen. So würde bei einem Bild oder einem Link ja zwingend eine URL benötigt.

Solche Helferfunktionen können Sie sich aber bei github kopieren oder selbst zusammenstellen.

Elemente dynamisch entfernen[Bearbeiten]

Sie können Elemente dynamisch erzeugen - sie aber auch dynamisch wieder entfernen. Dafür müssen Sie mit der parentNode-Eigenschaft den Elternknoten finden und dann dessen Kind (also das gewünschte Element) mit removeChild wieder entfernen.

Beispiel ansehen …
document.addEventListener('DOMContentLoaded', function () {
  document.addEventListener('click', removeElement);	
    
	
  function removeElement(e) {
    var elem = e.target;
    var main = document.querySelector('main');
    if (main != elem) {
      var parent = elem.parentNode;
      parent.removeChild( elem);
      return false;
    }
  }

});
In diesem Beispiel können Sie einzelne Elemente aus der Webseite löschen. Dafür wird mit event.target ermittelt, in welchem Element das Ereignis aufgetreten ist und dieser Wert der Variable elem zugewiesen.

Damit nicht die gesamte Seite gelöscht wird, überprüft man in einer bedingten Anweisung, ob das geklickte Ereignis im main-Element auftrat.

Bei allen anderen Elementen wird mit parentNode der Elternknoten ermittelt und dann mit removeChild(elem) das angeklickte Element entfernt.