javascript - 是否可以在 JavaScript 中包含 HTML 代码？

Question

我有一个基本问题，我可以在 JS 中包含 HTML 代码吗？ (使用 document.write)

这是我的 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><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></li>

我想将它包含在此 JS 代码中:

window.onload = function () {
  document.getElementById("menu").innerHTML="";
}

通过此代码连接它:

<p id="dropdown_menu"></p>

我该怎么做？

完整代码在这里 http://jsfiddle.net/tsnave/eSgWj/4/谢谢..

Answer 1

另一种方法是将 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>

然后您可以使用 Javascript 将其获取

var myHtml = document.getElementById('myHtml').innerHTML;

或使用可帮助您解决此问题的多个库之一。带有 type="text/template" 的脚本标签内的代码将不会被浏览器解释或显示。与将其直接放入 Javascript 中的字符串相比，这种方法的优势在于它允许您在编辑器中将其视为普通 HTML，并保持 Javascript 干净。另见 this post by John Resig .