将 html 内容调用到 jQuery 变量中答案

【问题标题】：Calling html content into a jQuery variable将 html 内容调用到 jQuery 变量中
【发布时间】：2015-10-27 10:59:43
【问题描述】：

所以，我正在使用 jQuery 在各种 HTML 文档（page1.html、page2.html、page3.html）中构建一个通用菜单。

到目前为止，这是我的代码：

HTML 片段：

<body>
    <div class="menu">

    </div>
</body>

JavaScript 文件：

var menucontent;

menucontent = "<ul>"+
                "<li title="+"Page 1"+">"+"<a href="+"Page1.html"+">"+"Page 1"+"</a></li>"+
                "<li title="+"Page 2"+">"+"<a href="+"Page2.html"+">"+"Page 2"+"</a></li>"+
                "<li title="+"Page 3"+">"+"<a href="+"Page3.html"+">"+"Page 3"+"</a></li>"+
              "</ul>";

$( ".menu" ).html(

menucontent

);

这一切都很好，但它是一个痛苦......继续添加“+”位。

我想知道的是 - 我可以有一个单独的 html 文件，其中包含以下代码，可以调用到 JavaScript menucontent 变量中吗？

对于您的示例，请调用以下 menu.html...

<ul>
    <li title="Page 1"><a href=Page1.html>Page 1</a></li>
    <li title="Page 2"><a href=Page2.html>Page 2</a></li>
    <li title="Page 3"><a href=Page3.html>Page 3</a></li>
</ul>

...或者有更好的方法吗？

【问题讨论】：

你可以使用documentFragment
检查这个链接：看起来像同样的问题stackoverflow.com/questions/11241056/…

标签： javascript jquery html

【解决方案1】：

您不必使用所有这些浓度。此外，您生成错误的标记。它可能会被浏览器正确呈现，但你会生成这个字符串：

<li title=Page 1>

改为使用单引号作为字符串分隔符并输入'<li title="Page 1">' + ... 或转义双引号："<li title=\"Page 1\">" + ...

所以正确的版本应该是这样的：

var menucontent = '<ul>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
  '</ul>';

$( '.menu' ).html(menucontent);

【讨论】：

@P.Frank 当然可以，只需在控制台中输入var 语句：)

【解决方案2】：

我错了，抱歉使用下面的语法

更新

'<ul>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
'</ul>';

我对多行字符串感到困惑。

'<ul/
>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
'</ul>';

【讨论】：

但是我仍然需要将“+”放在我有“”的代码中的其他位置，即： ?
查看我的更新！！因为 javascript 确实接受 + 表示多行。正确的方式是“/”
尝试时返回NaN
我错了，对不起。我对多行字符串感到困惑。 :)

【解决方案3】：

如果您可以使用服务器端代码，则可以进行 ajax 调用来获取您的菜单。
.NET aspx WebForm 示例：

<% @ Page Language="C#" %>
<% Response.ContentType = "text/HTML"; %>
<ul>
    <li title="Page 1"><a href=Page1.html>Page 1</a></li>
    <li title="Page 2"><a href=Page2.html>Page 2</a></li>
    <li title="Page 3"><a href=Page3.html>Page 3</a></li>
</ul>

jQuery:

$(document).ready(function () {
    getMenu();
});

function getMenu() {
    $.ajax({
        type: "GET",
        url: "menu.aspx",
        cache: false,
        crossDomain: false,
        dataType: "html",
        success: function (data) {
            $(".menu").html(data);
        },
        error: function (xhr, aOptions, rError) { // error action }
    });
}

【讨论】：

【解决方案4】：

试试看

menucontent = "<ul>"+
                "<li title='Page 1'><a href='Page1.html'>Page 1</a></li>"+
                "<li title='Page 2'><a href='Page2.html'>Page 2</a></li>"+
                "<li title='Page 3'><a href='Page3.html'>Page 3</a></li>"+
              "</ul>";

【讨论】：

【解决方案5】：

我想使用把手将 html 标记分隔为 html sn-p

<script id="template" type="text/x-handlebars-template">
  <ul>
    <li title="Page 1"><a href="Page1.html">Page 1</a></li>
    <li title="Page 2"><a href="Page2.html">Page 2</a></li>
    <li title="Page 3"><a href="Page3.html">Page 3</a></li>
  </ul>
</script>
var source = $("#template").html();
var template = Handlebars.compile(source);
$( ".menu" ).html(template);

你知道吗，现在你可以动态生成模板了

<script id="template" type="text/x-handlebars-template">
      <ul>
        {{#each page}}
           <li title="{{title}}"><a href="{{url}}">{{title}}</a></li>
        {{/each}}
      </ul>
</script>
var source = $("#template").html();
var data = [{title: 'page 1', url: 'Page1.html'}, {title: 'page 2', url: 'Page2.html'}];
var template = Handlebars.compile(source, data);
$( ".menu" ).html(template);

太棒了！

【讨论】：