在 Javascript 中的变量中创建 HTML 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6935750/
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
Creating HTML Content In a Variable in Javascript
提问by Jordash
I have a javascript variable I need to create like this:
我有一个 javascript 变量，我需要像这样创建：
var HTMLContent = '<div class="className">HTML Content</div>';
How can I format it in an easier to read format because I'm going to want to create multiple lines of HTML.
我如何将其格式化为更易于阅读的格式，因为我将要创建多行 HTML。
e.g.
例如
var HTMLContent = '
<div class="className">
HTML Content
</div>
';
Is something like that possible?
这样的事情可能吗？
It would also be good if I could import via URL e.g. var HTMLContent = 'http://domain.com/page.html';
如果我可以通过 URL 导入也很好，例如 var HTMLContent = 'http://domain.com/page.html';
回答by Derek Hunziker
var longStr = "You can split\
the string onto multiple lines\
like so";
An example using your HTML would be:
使用您的 HTML 的示例是：
var longStr =
'<div class="className">\
HTML Content\
</div>';
To load external HTML, check out jQuery's load method:
要加载外部 HTML，请查看 jQuery 的加载方法：
$('#result').load('ajax/test.html');
回答by aroth
In your page markup, add a hidden template div, like:
在您的页面标记中，添加一个隐藏的模板 div，例如：
<div id="contentTemplate" style="display: none;">
<div class="className">
HTML_CONTENT
</div>
</div>
...then in your JavaScript, you can do something like:
...然后在您的 JavaScript 中，您可以执行以下操作：
var newContent = 'The content for the new element';
var templateContent = document.getElementById("contentTemplate").innerHTML;
var htmlContent = templateContent.replace("HTML_CONTENT", newContent);
You could also use an AJAX requestto pull the value of newContentfrom a URL to get your dynamic content loading working. If you plan on doing this, however, then I suggest you investigate using a framework like jQuery, which can greatly simplify this process.
您还可以使用AJAX 请求newContent从 URL 中提取 的值以使动态内容加载工作。但是，如果您打算这样做，那么我建议您研究使用jQuery 之类的框架，它可以大大简化此过程。
回答by Mitch Wilkins
You can also use backticks
您也可以使用反引号
function myFunc() {
var HTMLContent =`
<div class="className">
<div>HTML Content</div>
</div>
`;
document.getElementById('demo').innerHTML = (HTMLContent);
}
myFunc()<div id="demo"></div>回答by PewterTech
var HTMLContent = "" +
"<div class=\"className\">\n" +
" HTML Content\n" +
"</div>\n" +
"";
This way, the script that writes it it pretty and the code it writes will be pretty too if someone were to view-source.
这样，如果有人查看源代码，编写它的脚本和它编写的代码也会很漂亮。
回答by user623879
You can use escape characters:
您可以使用转义字符：
var HTMLContent = '<div class="className">\n\tHTML Content\n</div>';
var HTMLContent = '<div class="className">\n\tHTML Content\n</div>';
I may have misinterpretted the question, you want the javascript to be more readable, not the html stored in the variable?
我可能误解了这个问题，您希望 javascript 更具可读性，而不是存储在变量中的 html？
回答by Eric Fortis
var HTMLContent =
'<div class="className">' +
'HTML Content' +
'</div>';
回答by Brian Hoover
You can do something like:
您可以执行以下操作：
var HTMLContent = '<div class="ClassName">' +
'HTML Content' +
'</div>';
