innerhtml – Programmieren lernen

innerHTML ist eine Eigenschaft in JavaScript, die den HTML-Inhalt eines Elements repräsentiert. Sie ermöglicht es dir, den gesamten HTML-Inhalt eines Elements zu erhalten oder zu ändern.

Jedes HTML-Element hat die Eigenschaft innerHTML, die sowohl Inhalt – einfachen Text als auch HTML-Tags – zwischen dem öffnenden und schließenden Tag des Elements lesen und schreiben kann. Nur Elemente ohne öffnendes und schließendes HTML-Tag haben kein innerHTML.

HTML-Inhalt abrufen: Du kannst innerHTML verwenden, um den HTML-Inhalt eines Elements abzurufen und ihn in einer Variable zu speichern oder anderweitig zu verwenden.

var element = document.getElementById("meinElement");
var htmlInhalt = element.innerHTML;
console.log(htmlInhalt); // Gibt den HTML-Inhalt des Elements in der Konsole aus

<!DOCTYPE html>
<html>
<head>
    <title>Reihen- / Rundenzähler</title>
</head>
<body>
Start mit der Reihe / Runde: <input type="text"  id="start">
<button id="myButton" name="myButton">+ 1 Reihe / Runde</button>

<!-- Ergebnis wird in diesem Bereich angezeigt -->
<div id="ergebnis"></div>

<script>
    // JavaScript-Code zur Behandlung des onclick-Events
    document.getElementById("myButton").onclick = function() {
        let beginn = parseInt(document.getElementById("start").value);
        let ende = beginn + 1;
        // Das Ergebnis wird im Bereich mit der ID "ergebnis" angezeigt
        document.getElementById("ergebnis").innerHTML = "<p>Monmentane Reihen- / Rundenzahl: " + ende + "</p>";
    }
</script>

</body>
</html>