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

Is it possible to include HTML code in JavaScript?

本文关键字：包含 HTML 代码 JavaScript 是否      更新时间：2023-09-26

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

另一种方法是将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的这篇文章。

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

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

你可以做：

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

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

相关文章：