javascript 在多行javascript中传播html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8104242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
spread html in multiple lines javascript
提问by michael643
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:
我想将下面的 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>© 2011 Code Computerlove</h4>
</div>
</div>
回答by Niels
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.
更新，似乎 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>© 2011 Code Computerlove</h4> \
</div> \
</div>';
Or use a HTML template and load it into a DIV (using jQuery)
或者使用 HTML 模板并将其加载到 DIV 中（使用 jQuery）
$("#div").load("/html_template.html");
回答by Strelok
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 $.getand possibly cache it somewhere in a variable.
另一种选择（如果代码会很大）是存储在 HTML 文件中，当您需要时，使用它快速检索它$.get并可能将其缓存在变量中的某个位置。
$.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.
我认为这实际上是一个很好的主意，因为修改该片段会容易得多。
回答by saintedlama
回答by Jerska
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>© 2011 Code Computerlove</h4>' +
' </div>' +
'' +
' </div>';
With a simple shell command to generate this from an html file:
使用简单的 shell 命令从 html 文件生成它：
cat myfile.html | sed "s/'/\'/g" | sed "$ ! s/^.*$/'const html = `
<div>
<!-- Content -->
</div>
`;
' +/g" | sed "$ s/^.*$/'##代码##';/"
Update: With ES6, simply use backticks:
更新：使用 ES6，只需使用反引号：
##代码##