SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:JS-element-appendChild.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Node.appendChild()</title>
<style>
</style>
</head>
<body><h1>Node.appendChild()</h1>
<p id="hint">Klick den Button an, um mit <code>appendChild()</code> weitere Listeneinträge
zu erzeugen und ins DOM einzuhängen.</p>
<button id="add">Los!</button>
<ol id="liste">
<li>Element</li>
</ol>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const addButton = document.querySelector('#add');
addButton.addEventListener('click', createList);
function createList() {
const element = document.getElementById('liste');
// Entferne alle bisherigen Kind-Elemente
element.innerHTML = '';
for (let i = 0; i < 10; i++) {
const newLI = document.createElement('li');
const liNumber = i + 1; // kürzer: i++
newLI.textContent = `Das ist Listeneintrag Nummer ${liNumber}`;
element.appendChild(newLI);
}
}
});
</script>
</body>
</html>
