jQuery插入多级HTML "smarter"方式？

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 block ？也许 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);