Beispiel:JS-element-innerHTML-insert-fail.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" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Beispiel: Element.innerHTML - unerwartetes Browserverhalten</title>
</head>
<body>
  <h1>Beispiel: Element.innerHTML - unerwartetes Browserverhalten</h1>
 
  <main id="main">
    <p>Klicken Sie auf die Buttons um mit innerHTML eine Liste von Zahlen zu erhalten. Der erste Button löst dabei ein unerwartetes Browserverhalten aus, das dazu führt, dass der Inhalt der Listenelemente nicht innerhalb der Listenelemente liegt.</p> 
    <button onclick="Zählen()">Zähle!</button>
    <button onclick="Zählen2()">Zähle richtig!</button>
    <ul id="Liste"><li>Noch nicht gezählt!</li></ul>
    <p>Die Liste hat aktuell folgenden HTML-Code als Inhalt:</p>
    <pre id="Inhalt">&lt;li&gt;Noch nicht gezählt!&lt;/li&gt;</pre>
  </main>

  <script>
function Zählen () {
    document.getElementById("Liste").innerHTML = "";
 
    for (let i = 1; i <= 10; i++) {
      document.getElementById("Liste").innerHTML += "<li>";
      document.getElementById("Liste").innerHTML += i;
      document.getElementById("Liste").innerHTML += "</li>";
    }

    document.getElementById("Inhalt").innerHTML = document.getElementById("Liste").innerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  }
 
  function Zählen2 () {
    document.getElementById("Liste").innerHTML = "";
 
    for (let i = 1; i <= 10; i++) {
      document.getElementById("Liste").innerHTML += "<li>"+i+"</li>";
    }

    document.getElementById("Inhalt").innerHTML = document.getElementById("Liste").innerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  }
  </script>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-element-innerHTML-insert-fail.html&oldid=50867“