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有一些内置的模板系统或者什么东西.. Dunno ..只是想知道

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

祝你好运！

jQuery插入多级HTML“更聪明”的方式？

2 个答案: