HTML Daten ändern – dynamische Webseiten

Durch die Definition der id in den HTML Tags können die HTML Elemente geändert werden. Die Methode .innerHTML wird der Text ersetzt.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body><h1>Dokument getElementbyID.Id("eingabe").innerHTML</h1>
    <p id="eingabe">Hello World</p>
Daten ändern auf einer Seite:
 <script>document.getElementById("eingabe").innerHTML="Hallo Michi";</script>
  </script>
</body></html>

Hier wird über die ID fixme der Absatz mit der Hintergrundfarbe orange festgelegt

let farbe = document.getElementById("fixme");
farbe.style.backgroundColor="orange";

Textfarbe

Die Textfarbe wird mit der style Eigenschaft color gesetzt:

//Zugriff über getElementbyId
<html>
    <meta charset="utf-8"> 
    <body>
        <p><font id="farbe">Hier ist ein einfacher Absatz</p> </font>      
        <script>
            let farbe = document.getElementById("farbe");
            farbe.style.color="orange";
</script>
    </body>
</html>