将HTML扩展到多行javascript中

更新，似乎Javascript通过添加反斜杠(')作为行中的最后一个字符来支持多行，你甚至不能在它后面有空格键，因为这样它就不会取消换行符。

    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>';

或者使用HTML模板并将其加载到DIV(使用jQuery)

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

你可以这样做:

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

所以基本上你仍然需要以某种方式分解代码。

另一种选择(如果代码很大)是存储在HTML文件中，当您需要时，使用$.get快速检索它，并可能将其缓存在某个变量中。

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

我认为这实际上是一个很好的主意，因为修改代码片段会更容易。

真的是一个老问题，但是我没有发现很多这种语法，所以我就把它留在这里，因为对我来说它是最易读的。

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>';

用一个简单的shell命令从html文件生成:

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

更新:在ES6中，只需使用反引号:

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

从javascript生成html直接将逻辑和表示联系在一起。它还会乱码。

你可以使用像pure这样的javascript模板引擎来获得逻辑和表示的清晰分离。

我知道这是一个老问题，但现在(2023)可以使用' instead '或"用于在javascript中插入多个HTML行