Seite wird zur Zeit überarbeitet

18. Juli 2017

innerHTML vs insertAdjacentHTML

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id =Absatz1>
      <p>Ein Absatz im HTML Code. <span>Klick mich</span>, um die Konsolenausgabe zu sehen.</p>
    </div>
    <button id=btn1>Absatz per innerHTML einfügen, dann funktioniert der Klick auf den ersten Absatz nicht mehr.</button>

    <div id =Absatz2>
      <p>Ein weiterer Absatz im HTML Code. Klick mich, um die Konsolenausgabe zu sehen.</p>
    </div>
    <button id=btn2>Absatz per insertAdjacentHTML einfügen, dann funktioniert der Klick auf den ersten Absatz weiterhin.</button>
    </div>

   <script type="text/javascript">
    var $={
      $(element, func){
        return (func) ? [].slice.call(document.querySelectorAll(element)).forEach(func):document.querySelector(element);
      },
      on (element,event,func){
        this.$(element, (el) => el.addEventListener(event, func));
      }
    }

    $.on('p', 'click', (e, _=e.currentTarget) => console.log(_.innerHTML));

    $.on('#btn1', 'click', () => $.$('#Absatz1').innerHTML+='<p>Ein Absatz eingefügt mit innerHTML</p>');

    $.on('#btn2', 'click', () => $.$('#Absatz2').insertAdjacentHTML('beforeend','<p>Ein Absatz eingefügt mit insertAdjacentHTML</p>'));

    </script>
  </body>
  </html>
  </html>


Frank Wisniewski Lohmühlenstraße 2 53518 Adenau
Telefon: 02691 / 548 E-Mail: info@w-web.de