WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to assign block of HTML code to a JavaScript variable

Topic: JavaScript / jQueryPrev|Next

Answer: Use the concatenation operator (+)

The simple and safest way to use the concatenation operator (+) to assign or store a bock of HTML code in a JavaScript variable. You should use the single-quotes while stingify the HTML code block, it would make easier to preserve the double-quotes in the actual HTML code.

You also need to escape the single-quotes which appears inside the content of HTML block — just replace the ' with \', as shown in the example below:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Store HTML Code in JavaScript Variable</title> 
  • </head> 
  • <body>
  •     <div id="wrapper"></div>
  •     <script>
  •     // Storing HTML code block in a variable
  •     var codeBlock = '<div class="content">' +
  •                         '<h1>This is a heading</h1>' +
  •                         '<p>This is a paragraph of text.</p>' +
  •                         '<p><strong>Note:</strong> If you don\'t escape "quotes" properly, it will not work.</p>' +
  •                     '</div>';
  •     
  •     // Inserting the code block to wrapper element
  •     document.getElementById("wrapper").innerHTML = codeBlock
  •     </script> 
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.