Bild dynamisch mit JavaScript erzeugen

Mit JavaScript ist es möglich ein Bild (image) dynamisch zu erstellen und einem Element (z.B. einem Div) zuzuweisen. Das folgende Code-Beispiel veranschaulicht diesen Effekt:

1
2
3
4
5
6
7
8
    <div id="wrapper"></div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      var image = document.createElement('img');
      image.setAttribute('src', './images/logo.png');
      image.src = './images/logo.png'; // Alternative!
      divWrapper.appendChild(image);
    </script>

Hinweis: Die Pfadangabe zum Bild kann absolut oder relativ (ausgehend vom HTML-Dokument!) sein.