在多行javascript中傳播html

Question

我想把下面的html代碼放在我的javascript函數中。 我不想把它們全部放在一起。 代碼是否可能與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>

Answer 1

更新，似乎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");

Answer 2

你可以這樣做：

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

所以你還需要分解代碼。

另一種方法（如果代碼很大）將存儲在HTML文件中，當您需要時，使用$.get快速檢索它，並可能將其緩存在變量中的某個位置。

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

我認為這實際上是個好主意，因為修改該代碼段會更容易。

Answer 3

從javascript生成html直接將邏輯和表示聯系在一起。 它也會使你的代碼變得惹惱。

您可以使用像pure這樣的javascript模板引擎來清楚地分離邏輯和表示。

Answer 4

真的很老的問題，但我沒有找到這么多的語法，所以我只是留在這里，對我來說它是最可讀的。

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