在js中包含HTML代码 [英] include HTML code in js

问题描述

我有一个基本的准备。我可以在JS中包含一个HTMl代码吗？ （使用document.write）

这是我的HTMl代码：

 < li>< a href =＃class =menulink>文字< / a>< / li> 
< li>< a href =＃class =menulink>文字< / a> < /锂> 
< li>< a href =＃class =menulink>文字< / a> 
< ul> 
 
< li> 
< a href =＃class =sub>文字< / a> 
< ul> 
< li class =topline>< a href =＃>文字< / a>< / li> 
< li><＃> text< / a>< / li> 
< li>< a href =＃> text< / a>< / li> 
< li>< a href =＃>文字< / a>< / li> 
< li>< a href =＃>文字< ; / a>< / li> 
< li>< a href =＃text< / a>< / li> 
< li>< a href = >文字< / a>< / li> 
 
< / ul> 
< / li> 
< li> 
< a href =＃class =sub> text< / a> 
< ul> 
< li class =topline>< a href =＃>文字< / a>< / li> 
< li>< a href =＃>文字< / a>< / li> 
 
 
 
< / ul> 
< / li> 
 
< li> 
< a href =＃class =sub> text < / a>< / li> 
< li> 
& lt; a href =＃class =sub>文字< / a>< / li> 
< / ul> 
< / li> 
 
< li> 
< a href =＃class =menulink>文字< / a> 
 
 
< / li> 
< li>< a href =＃class =menulink>文字< / a> 
  

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

  window.onload = function（）{
 document.getElementById（menu）。innerHTML =; 
  

通过以下代码连接它：

 < p id =dropdown_menu>< / p> 
  

我该如何做？

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

解决方案

不同的方法是将HTML放入脚本标记：

 < script type =text / templateid =myHtml> 
< li class =topline>< a href =＃>一些文字< / a>< / li> 
< li>< a href =＃>一些文字< / a>< / li> 
< li>< a href =＃>一些文字< / a>< / li> 
< li>< a href =＃>一些文字< / a>< / li> 
< li>< a href =＃某些文字< / a>< / li> 
< li>< a href =＃>一些文字< / a>< / li> 
< li>< a href =＃>一些文字< / a>< / li> 
< / script> 
  

然后您可以使用

  var myHtml = document.getElementById（'myHtml'）。innerHTML; 
  

或者使用其中一个库来帮助您。脚本标记内的代码不会被浏览器解释或显示，其中 type =text / template这种方法在Javascript中直接插入字符串的优点是可以让您在编辑器中将其视为普通的HTML，并保持Javascript的清洁。另请参阅 John Resig的这篇文章。

I have a basic quastion. can i include a HTMl code in JS? (with "document.write")

This is my HTMl code:

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

and i want to include it in this JS code

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

connect it by this code:

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

how can i do it?

the full code is here http://jsfiddle.net/tsnave/eSgWj/4/ thanks..

解决方案

A different way of doing it is to put the HTML inside a script tag:

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

Then you can get it into Javascript using

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

or using one of several libraries which help you with this. Code inside a script tag with type="text/template" will not be interpreted or shown by the browser. The advantage of this approach over putting it straight into a string in Javascript is that it allows you to keep treating it as normal HTML in your editor, and it keeps the Javascript clean. See also this post by John Resig.

这篇关于在js中包含HTML代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！