Question

我使用以下jQuery方法将一些html添加到div：

$('#pageTabContent').append($('\
                    <div class="tab-pane" id="'+ticketId+'">\
                        And a whole lot more html here..
                    </div>'));

这很好用，但是因为我在我的javascript中得到了太多的html，我想把它移到一个单独的文件中。问题是我还需要在html中插入ticketId。有没有办法使用Javascript / jQuery从单独的文件加载html，但仍然在其中插入ticketId？

[编辑]请注意，每次使用此代码时，ticketId都不同。我将在一个页面加载中多次使用，因此我无法使用php在html中加载ticketId。我必须做客户端。

欢迎所有提示！

Answer 1

对于特定的示例，它非常简单：

$.get("/path/to/file.html", function(html) {
    var newStuff = $(html);
    newStuff.find("div.tab-pane:first").attr("id", ticketId);
    newStuff.appendTo("#pageTabContent");
});

你可以概括一点，基本概念是：1。加载HTML，2。使用jQuery从中创建DOM元素，3。使用jQuery查找有问题的元素并修改它，4。添加到元素。

另一种方法是使用某种形式的模板，模板插件或DIY：

$.get("/path/to/file.html", function(html) {
    html = html.replace("{{ticketId}}", ticketId);
    $("#pageTabContent").append(html);
});

同样，有一些插件和模板系统可以为您完成这项工作，它可以提供各种功能，而不是自己动手。

Answer 2

我一般建议在javascript中避免动态html生成。有几个很好的基于模板的框架。我想在KnockoutJS http://knockoutjs.com/

中使用

此方法的另一个好处是模型和html元素之间的更改跟踪。

如何加载文件的内容并使用Javascript在其中插入变量？

2 个答案: