How to assign block of HTML code to a JavaScript variable?
Answer: Using Single Quote and Concatenation (+) Operator
JavaScript offers various ways to assign the HTML code to a JavaScript Variable. The easiest way to assign the HTML code to the JavaScript variable is using the concatenation operator. We just have to put the block of HTML code within the single quote and use plus(+) operator to combine multiline, and then assign this to JS variable. Using the single quotes, we can preserve the double quotes within the actual code HTML code.
Example: Using Single Quote and Concatenation (+) operator
In the given example, we have used the concatenation operator (+) and assigned the block of HTML code to a JavaScript variable.
<!DOCTYPE html>
<html>
<head>
<title>Assign HTML code to JavaScript Variable</title>
</head>
<body>
<div id="myId"></div>
<script>
var code = '<h1>Hello World!</h1>' +
'<h3>Welcome to Studytonight</h3>' +
'<p>We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>';
document.getElementById("myId").innerHTML = code;
</script>
</body>
</html>
Output
Hello World!
Welcome to Studytonight
We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.
Apart from the concatenation operator, we can also assign the block of HTML code to a JavaScript variable using the backticks (` `). The concept of backticks was introduced in ES6. We just have to put the block of HTML code within the backticks without using any concatenation operator and then assign it to a JavaScript variable. We will get the same output that we get when using the given block of HTML code without JavaScript.
Example: Using backticks (` `)
In the given example, we have used the backticks (` `) to assign the block of HTML code to the JavaScript variable. When we use backticks then there is no need to use the concatenation operator to concatenate the HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Assign HTML code to JavaScript Variable</title>
</head>
<body>
<div id="myId"></div>
<script>
var code = `<h1>Hello World!</h1>
<h3>Welcome to Studytonight</h3>
<p>We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>`;
document.getElementById("myId").innerHTML = code;
</script>
</body>
</html>
Output
Hello World!
Welcome to Studytonight
We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.
Conclusion
In this lesson, we have learned how to assign the HTML code to a JavaScript variable. Here, we have discussed two methods to assign the HTML code to the JavaScript variable. The first method is using the concatenation operator (+), we just have to put the HTML code inside the single quote and concatenate each line of code using the concatenation operator. In the second method, we have used the backticks (` `). We just have to put the block of HTML code inside the backticks.
