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

时间:2012-08-31 13:30:36

标签: javascript html

我有一个基本问题,我可以在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><#">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>

我希望将它包含在这个JS代码中

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

通过以下代码连接:

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

我该怎么做?

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

5 个答案:

答案 0 :(得分:13)

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

答案 1 :(得分:10)

  

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

答案 2 :(得分:2)

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

答案 3 :(得分:2)

你可以这样做:

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

答案 4 :(得分:0)

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

}