Advertisements
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:
Example
Try this code »<!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:
- How to add elements to DOM in jQuery
- How to remove wrapper element but keep the text content intact using jQuery
- How to bind click event to dynamically added HTML elements in jQuery
Advertisements
