Mehrzeiliger HTML-Code per Javascript über innerHTML einfügen

Kategorie: Javascript
Publikationsdatum: 22.06.2011
Hin und wieder möchte man einen mehrzeiligen HTML-Code per Javascript und über innerHTML einfügen. Die schnelle Variante, sprich die Füllmethode 1: Den gesamten HTML-Code in eine einzige Zeile schreiben und fertig. Für die Lesbarkeit natürlich der Todesstoß.
Die zweite Art, die Füllmethode 2, setzten den HTML-Code mit allen Einrückungen. Es werden aber die einzelne Zeile mittels dem Pluszeichen zusammengefügt. Somit ist die Lesbarkeit erhöht.
HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testseite</title>
  6.  
  7. <script type="text/javascript" language="javascript" >
  8. function fillContainer1()
  9. { var string = '<div class="container"><div class="header"><img src="images/logo.png" width="100" height="200" alt="Logo" title="Logo" /></div><div class="content"><h1>Titel</h1><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.</div></div><div class="footer">&copy; Copyright 2001</div></div>';
  10. document.getElementById('bigcontent').innerHTML = string;
  11. }
  12.  
  13. function fillContainer2()
  14. { var string = '<div class="container">'+
  15. ' <div class="header">'+
  16. ' <img src="images/logo.png" width="100" height="200" alt="Logo" title="Logo" />'+
  17. ' </div>'+
  18. ' <div class="content">'+
  19. ' <h1>Titel</h1>'+
  20. ' <div class="text">'+
  21. ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.'+
  22. ' </div>'+
  23. ' </div>'+
  24. ' <div class="footer">'+
  25. ' &copy; Copyright 2001'+
  26. ' </div>'+
  27. '</div>';
  28. document.getElementById('bigcontent').innerHTML = string;
  29. }
  30. </script>
  31. </head>
  32.  
  33. <body>
  34. <input type="button" name="fillContainer1" value="F&uuml;llmethode 1" onclick="fillContainer1();" />&nbsp;&nbsp;&nbsp;<input type="button" name="fillContainer2" value="F&uuml;llmethode 2" onclick="fillContainer2();" />
  35. <br /><br />
  36. <div id="bigcontent"></div>
  37. </body>
  38. </html>
Stichwörter: Javascript, HTML, innerHTML, mehrzeiliger Code
 
 
NACH OBEN