spread html in multiple lines javascript

Question

I want to put the below html code in my javascript function. I don't want to put it all next to each other. Is it possible to the code in the same way as how it is in html? Code:

    <div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">

        <div data-role="header">
            <h1>Second Gallery</h1>
        </div>

        <div data-role="content">   

            <ul class="gallery">

                <li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
                <li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
                <li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
                <li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>
                <li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>
                <li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>
                <li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>
                <li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>
                <li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>

            </ul>

        </div>

        <div data-role="footer">
            <h4>&copy; 2011 Code Computerlove</h4>
        </div>

    </div>

Niels · Accepted Answer · 2011-11-12T12:22:00.853

Updated, seems like Javascript does support multi lines by adding a backslash ( \ ) as the last character in the line, you can't even have a space bar behind it, because then it won't cancel the line break.

    var str = '<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page"> \
    <div data-role="header">  \
        <h1>Second Gallery</h1> \
    </div> \
    <div data-role="content"> \  
        <ul class="gallery"> \
            <li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li> \
            <li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li> \
            <li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li> \
            <li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li> \
            <li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li> \
            <li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li> \
            <li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li> \
            <li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li> \
            <li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li> \
        </ul> \
    </div> \
    <div data-role="footer"> \
        <h4>&copy; 2011 Code Computerlove</h4> \
    </div> \
</div>';

Or use a HTML template and load it into a DIV (using jQuery)

$("#div").load("/html_template.html");

using \ javascript *does* allow multiline strings. See http://stackoverflow.com/questions/805107/multiline-strings-in-javascript/805755#805755 — KooiInc, Nov 12 '11 at 12:04
Wow, I'm using javascript for a few years now, and never seen that before, that's great. — Niels, Nov 12 '11 at 12:12

score 10 · Answer 2 · answered Nov 12 '11 at 11:52

You can kind of do this:

var myHtml = [
 'firstline',
 'second line',
 'third line'].join("\n");

So pretty much you still need to break up the code some how.

An alternative (if the code is going to be large) would be to store in a HTML file and when you need, retrieve it quickly with $.get and possibly cache it somewhere in a variable.

$.get('snippet.html', function(data) {
  $('.result').html(data);
});

I think this is actually a pretty good idea as modifying that snippet will be much easier.

Jerska · Answer 3 · 2022-11-24T21:53:16.777

Really old question, but I don't find this syntax a lot, so I'll just leave this here, as to me it is the most readable.

var html = '' +
    '    <div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">' +
    '' +
    '        <div data-role="header">' +
    '            <h1>Second Gallery</h1>' +
    '        </div>' +
    '' +
    '        <div data-role="content">' +
    '' +
    '            <ul class="gallery">' +
    '' +
    '                <li><a href="images/full/010.jpg" rel="external"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>' +
    '                <li><a href="images/full/011.jpg" rel="external"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>' +
    '                <li><a href="images/full/012.jpg" rel="external"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>' +
    '                <li><a href="images/full/013.jpg" rel="external"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>' +
    '                <li><a href="images/full/014.jpg" rel="external"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>' +
    '                <li><a href="images/full/015.jpg" rel="external"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>' +
    '                <li><a href="images/full/016.jpg" rel="external"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>' +
    '                <li><a href="images/full/017.jpg" rel="external"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>' +
    '                <li><a href="images/full/018.jpg" rel="external"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>' +
    '' +
    '            </ul>' +
    '' +
    '        </div>' +
    '' +
    '        <div data-role="footer">' +
    '            <h4>&copy; 2011 Code Computerlove</h4>' +
    '        </div>' +
    '' +
    '    </div>';

With a simple shell command to generate this from an html file:

cat myfile.html | sed "s/'/\\'/g" | sed "$ ! s/^.*$/'\0' +/g" | sed "$ s/^.*$/'\0';/"

Update: With ES6, simply use backticks:

const html = `
  <div>
    <!-- Content -->
  </div>
`;

score 3 · Answer 4 · answered Nov 12 '11 at 11:55

3

Generating html from javascript directly ties logic and presentation together. It also garbles your code.

You can use a javascript templating engine like pure to get a clear separation of logic and presentation.

answered Nov 12 '11 at 11:55

saintedlama

6,838
1
28
46

score 0 · Answer 5 · answered Jul 04 '23 at 13:52

0

I know this is an old question, but right now (2023) it is posible to use ` instead ' or " for inserting of multiple html lines in javascript

answered Jul 04 '23 at 13:52

darthcharmander

129
1
7

spread html in multiple lines javascript

5 Answers5

Linked