在js代码中插入HTML文本

Question

如何将 html 文件导入到 javascript 代码中？

目前我必须做类似的事情：

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

如何将js代码和html代码分离到单独的文件中。稍后可以轻松地将 html 代码加载到 javascript 中吗？

Answer 1

你可以这样做。取自以下参考链接。

您需要将 ul 和 li 标签放入名为

import.htm

的文件中，并且它需要与当前文件位于同一位置。

var ajax = new XMLHttpRequest();
ajax.open("GET", "import.htm", false);
ajax.send();
document.getElementById("menu").innerHTML += ajax.responseText;

参考：

Answer 2

就这样

$("#menu").load('menu.html #menulist');

然后在 HTML 文件中执行此操作

<ul id ="menulist">
<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>
</ul>

为了更好的参考

点击这里