Beispiel:JS-DOM-Tut-6.html

Aus SELFHTML-Wiki

Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">

<script> 'use strict'; document.addEventListener('DOMContentLoaded', function () {

 let text = 'Dies ist ein neuer Listeneintrag!'; 

 document.querySelector('#new').addEventListener('click', createElement);

 function createElement(){
   let container = document.querySelector('#taskList'),
       newElm = document.createElement('li');
   newElm.textContent = text;
   container.appendChild(newElm);
 }

});

</script> <title>ToDo-Liste - 1</title> </head>

<body>

ToDo-Liste - 1

<form id="controls"> <button type="button" id="new">Hinzufügen!</button> </form>

Dies ist ein Listeneintrag, dem dynamisch weitere Einträge angehängt werden können.

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-DOM-Tut-6.html&oldid=100598“