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/，谢谢。

- Nave Tseva

---

我改了代码... 请帮帮我... - Nave Tseva

Answer 1

另一种做法是将HTML代码放在script标签内：

<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" 的 script 标签内的代码不会被浏览器解释或显示。这种方法相对于将其直接放入Javascript字符串的优点在于它允许你在编辑器中像处理普通HTML一样来处理它，并且可以使Javascript代码更加清晰简洁。请参见 John Resig 的 这篇文章。

- Supr

---

"type="text/template"和"type="text/Html"之间有什么区别？" - niz_sh

Answer 2

我能在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>';
}

- James

Answer 3

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

- Dunhamzzz

Answer 4

您可以执行以下操作：

document.getElementById("menu").innerHTML="<div>hello</div>"

- DadViegas

Answer 5

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

}

- Krishna Kumar

---

我回滚了编辑，因为JS不支持在字符串中换行。 - Florent

嗨，谢谢！我修改了上面的代码，现在你的解决方案不起作用了...你能帮我吗？麻烦你了。 - Nave Tseva

请确保有一个id为"menu"的HTML元素，并在页面加载后运行此代码。修改答案并尝试它，应该能够正常工作。 - Krishna Kumar

你能否修改你的代码以匹配上方的当前代码呢？我尝试了你的第一个建议，但代码并没有成功... 我很希望能得到帮助... 谢谢！ - Nave Tseva

这对我来说非常困难。你能否写出正确的代码？谢谢。 - Nave Tseva