jquery - jQuery插入多级HTML“更智能”的方式？

Question

我需要定期使用 jQuery 动态插入多级 HTML 代码。我倾向于以这种方式插入它：

$('#target').prepend('<div class="parent">' + 
    '<div class="child" data-id="' + someId + '">' + 
        '<h1>Some header</h1>' + 
        '<p class="info">' + someDynamicText + '</p>' + 
    '</div>' + 
    '<div class="sibling">' + someOtherInfo + '</div>' + 
'</div>');

当然一切正常，但我想知道是否有更流畅的方式来插入这样的 HTML 块？也许 jQuery 有某种内置的模板系统或其他东西.. 不知道.. 只是想知道

Answer 1

将每个元素构建为一个 javascript 变量，而不是预先添加一个长字符串。

例如：

var $parent = $("<div/>");
$parent.addClass("parent");

var $child = $("<div/>");
$child.addClass("child");
$child.data("id", someId);

var $h1 = $("<h1/>");
$h1.text("Some header");
$child.append($h1);

//etc.....

$parent.append($child);

$("#target").prepend($parent);

Answer 2

有许多 jquery 插件可以管理设计模式，例如MVVM 的knockoutjs等等......但对于你的情况，有一个简单而不复杂的库调用jQuery.tmpl

祝你好运！