如何使用Javascript加載文件的內容並在其中插入變量？

Question

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

$('#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元素之間進行更改跟蹤。