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 ' character with \', as shown in the following example:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties