9

我有一个基本问题，我可以在 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/ 谢谢..

4

5 回答 5

16

另一种方法是将 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 干净。另请参阅John Resig 的这篇文章。

于 2012-08-31T13:37:35.610 回答
12

我可以在 JS 中包含 HTML 代码吗？

如果你的意思是你可以通过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>';
}
于 2012-08-31T13:32:25.860 回答
4 
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>
';

我所做的只是将引号切换为单引号，这样 HTML 属性就不会弄乱字符串。如果您确实需要在innerHtml字符串中添加单引号，则可以使用反斜杠对其进行转义，即：innerHtml = ' Don\'t break me';

于 2012-08-31T13:31:43.483 回答
3

你可以做：

document.getElementById("menu").innerHTML="<div>hello</div>"
于 2012-08-31T13:32:03.007 回答
1 
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>';
}

编辑：

它应该工作。

<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>';

}

于 2012-08-31T13:33:04.973 回答