Create html variable in javascript

I have a javascript variable I need to create like this:

var HTMLContent = '
HTML Content
';

How can I format it in an easier to read format because I'm going to want to create multiple lines of HTML.

e.g.

var HTMLContent = '

  HTML Content

';

Is something like that possible?

It would also be good if I could import via URL e.g. var HTMLContent = '//domain.com/page.html';

Warface

4,9699 gold badges54 silver badges82 bronze badges

asked Aug 4, 2011 at 3:04

 var longStr = "You can split\
 the string onto multiple lines\
 like so";

An example using your HTML would be:

var longStr = 
    '
\
        HTML Content\
    
';

To load external HTML, check out jQuery's load method:

$['#result'].load['ajax/test.html'];

answered Aug 4, 2011 at 3:08

Derek HunzikerDerek Hunziker

12.9k3 gold badges56 silver badges105 bronze badges

2

In your page markup, add a hidden template div, like:

    

        HTML_CONTENT
    

...then in your JavaScript, you can do something like:

var newContent = 'The content for the new element';
var templateContent = document.getElementById["contentTemplate"].innerHTML;
var htmlContent = templateContent.replace["HTML_CONTENT", newContent];

You could also use an AJAX request to pull the value of newContent from a URL to get your dynamic content loading working. If you plan on doing this, however, then I suggest you investigate using a framework like jQuery, which can greatly simplify this process.

answered Aug 4, 2011 at 3:14

arotharoth

53.2k20 gold badges138 silver badges172 bronze badges

You can also use backticks

function myFunc[] {
var HTMLContent =`

    
HTML Content

`;

document.getElementById['demo'].innerHTML = [HTMLContent];

}
myFunc[]

answered Nov 28, 2016 at 19:23

0

var HTMLContent = 
    '
' +
    'HTML Content' +
    '
';

answered Aug 4, 2011 at 3:07

Eric FortisEric Fortis

14.4k6 gold badges38 silver badges57 bronze badges

You can do something like:

 var HTMLContent = '
' + 
   'HTML Content' +
    '
';

answered Aug 4, 2011 at 3:08

Brian HooverBrian Hoover

7,7932 gold badges27 silver badges41 bronze badges

You can use escape characters:

var HTMLContent = '

\n\tHTML Content\n

';

I may have misinterpretted the question, you want the javascript to be more readable, not the html stored in the variable?

answered Aug 4, 2011 at 3:06

user623879user623879

4,0168 gold badges36 silver badges53 bronze badges

1

var HTMLContent = "" +
"
\n" +
"    HTML Content\n" +
"
\n" +
"";

This way, the script that writes it it pretty and the code it writes will be pretty too if someone were to view-source.

answered Jan 15, 2014 at 19:11

How set HTML variable in JavaScript?

How do you create a variable in HTML?

Can you put HTML in JavaScript?

How do you code a variable in JavaScript?