how to assign a block of html code to a javascript variable

Greetings! I know this is an older post, but I found it through Google when searching for “javascript add large block of html as variable”. I thought I’d post an alternate solution.

First, I’d recommend using single-quotes around the variable itself … makes it easier to preserve double-quotes in the actual HTML code.

You can use a backslash to separate lines if you want to maintain a sense of formatting to the code:

var code="<div class="my-class"> \
        <h1>The Header</h1> \
        <p>The paragraph of text</p> \
        <div class="my-quote"> \
            <p>The quote I\"d like to put in a div</p> \
        </div> \
    </div>';

Note: You’ll obviously need to escape any single-quotes inside the code (e.g. inside the last ‘p’ tag)

Anyway, I hope that helps someone else that may be looking for the same answer I was … Cheers!

Leave a Comment