Przykład na dynamiczną zmianę kodu HTML. Pusta warstwa DIV staje się niepusta po użyciu .innerHTML w JavaScript. Zwróć uwagę, że warstwa DIV musi mieć tą samą nazwę „warstwa” co argument funkcji getElementById (’warstwa’).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 <head>
   <meta charset="utf-8">
 </head>
 
 <body>
  <div id="warstwa">
        <!-- pusta warstwa - w niej będziemy umieszczać potem nasz dynamiczny kod HTML.
             WAŻNE - ta warstwa musi być zamknięta PRZED JavaScriptem w nią ingerującym.-->
  </div>
  <script>
        var imie = prompt("Podaj imię: ");
        document.getElementById('warstwa').innerHTML = "Podałeś imię <b>: " + imie + " </b>";
 </script>
 </body>
</html>

Zupełnie inny przykład ze szpaltami inspirowany poprzednim, należy najpierw utworzyć styl i szpalty zgodnie z programem Układ strony oparty na 3 kolumnach z CSS, a następnie zmodyfikować kod HTML zgodnie z powyższymi wskazówkami, końcowy efekt ma postać:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div id="kontener">
  <div id="naglowek">Nagłówek
    <!-- Nowy kod, którego nie było w przykładzie ze szpaltami, pusta warstwa: -->
                <div id="warstwa"></div>
     <!-- koniec nowego kodu, reszta to JavaScript na dole -->
   </div>
   <div class="kolumna">Menu</div>
   <div class="kolumna">News</div>
   <div class="kolumna">Bannery</div>
   <div id="clear"></div>
   <div id="stopka">Stopka</div>
  </div>
 <script>
        var a = prompt("Podaj imię: ");
        document.getElementById('warstwa').innerHTML = "Podałeś imię <b>: " + a + " </b>";
 </script>
 </body>
</html>
HTML + CSS, JavaScript