javascript - 在多行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");