是否可以在 JavaScript 中包含 HTML 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12216391/
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
Is it possible to include HTML code in JavaScript?
提问by Nave Tseva
I have a basic question, can i include HTML code in JS? (with "document.write")
我有一个基本问题，我可以在 JS 中包含 HTML 代码吗？（使用“document.write”）
This is my HTML code:
这是我的 HTML 代码：
<li><a href="#" class="menulink">text</a></li>
<li><a href="#" class="menulink">text</a> </li>
<li><a href="#" class="menulink">text</a>
<ul>
<li>
<a href="#" class="sub">text</a>
<ul >
<li class="topline"><a href="#">text</a></li>
<li><#">text </a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#"text</a></li>
<li><a href="#">text</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">text </a>
<ul>
<li class="topline"><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</li>
<li>
<a href="#" class="sub"> text </a></li>
<li>
<a href="#" class="sub"> text </a></li>
</ul>
</li>
<li>
<a href="#" class="menulink">text</a>
</li>
<li><a href="#" class="menulink">text</a>
and i want to include it in this JS code
我想将它包含在这个 JS 代码中
window.onload = function () {
document.getElementById("menu").innerHTML="";
connect it by this code:
通过此代码连接它：
<p id="dropdown_menu"></p>
how can i do it?
我该怎么做？
the full code is herehttp://jsfiddle.net/tsnave/eSgWj/4/thanks..
完整代码在这里http://jsfiddle.net/tsnave/eSgWj/4/谢谢..
回答by Supr
A different way of doing it is to put the HTML inside a script tag:
另一种方法是将 HTML 放在脚本标签中：
<script type="text/template" id="myHtml">
<li class="topline"><a href="#">some text</a></li>
<li><a href="#">some text </a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#"some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
</script>
Then you can get it into Javascript using
然后你可以使用它进入Javascript
var myHtml = document.getElementById('myHtml').innerHTML;
or using one of several libraries which help you with this. Code inside a script tag with type="text/template"will not be interpreted or shown by the browser. The advantage of this approach over putting it straight into a string in Javascript is that it allows you to keep treating it as normal HTML in your editor, and it keeps the Javascript clean. See also this post by John Resig.
或使用可帮助您解决此问题的几个库之一。type="text/template"浏览器不会解释或显示脚本标签内的代码。与将它直接放入 Javascript 中的字符串相比，这种方法的优势在于它允许您在编辑器中继续将其视为普通 HTML，并且它保持 Javascript 干净。另请参阅John Resig 的这篇文章。
回答by James
can I include HTML code in JS?
我可以在 JS 中包含 HTML 代码吗？
If by that you mean can you output HTML via javascript then the answer is yes e.g.
如果您的意思是您可以通过 javascript 输出 HTML，那么答案是肯定的，例如
window.onload = function() {
document.getElementById("menu").innerHTML = '<li class="topline"><a href="#">some text</a></li>
<li><a href="#">some text </a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#"some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>';
}
回答by Dunhamzzz
document.getElementById("menu").innerHTML='
<li class="topline"><a href="#">some text</a></li>
<li><a href="#">some text </a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#"some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
';
All I really did was switch the quotes to single quotes so the HTML attributes don't mess the string up. If you did need to put single quotes in the innerHtmlstring, you can escape them with backslash, ie: innerHtml = ' Don\'t break me';
我真正做的只是将引号切换为单引号，这样 HTML 属性就不会弄乱字符串。如果您确实需要在innerHtml字符串中放置单引号，您可以使用反斜杠将它们转义，即：innerHtml = ' Don\'t break me';
回答by DadViegas
You can do:
你可以做：
document.getElementById("menu").innerHTML="<div>hello</div>"
回答by Krishna Kumar
window.onload = function(){
document.getElementById("menu").innerHTML='<li class="topline"><a href="#">some text</a></li><li><a href="#">some text </a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#"some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li>';
}
Edited:
编辑：
It should work.
它应该工作。
<script type="text/javascript">
window.onload = function(){
document.body.innerHTML =
'<li><a href="#" class="menulink">text</a></li>'
+'<li><a href="#" class="menulink">text</a></li>'
+'<li><a href="#" class="menulink">text</a><ul>'
+'<li><a href="#" class="sub">text</a><ul>'
+'<li class="topline"><a href="#">text</a></li>'
+'<li><a href="#">text </a></li><li><a href="#">text</a></li>'
+'<li><a href="#">text</a></li><li><a href="#">text</a></li>'
+'<li><a href="#"text</a></li><li><a href="#">text</a></li></ul>'
+'</li><li><a href="#" class="sub">text </a><ul>'
+'<li class="topline"><a href="#">text</a></li>'
+'<li><a href="#">text</a></li></ul></li>'
+'<li><a href="#" class="sub">text</a></li>'
+'<li><a href="#" class="sub">text</a></li>'
+'</ul></li><li><a href="#" class="menulink">text</a></li>'
+'<li><a href="#" class="menulink">text</a>';
}
