javascript - JQuery 附加到元素 - 更好的技术？

Question

我更像是一个后端人员，而不是 Javascript 人员。请原谅我提出的可能是 Javascript/Jquery 新手问题。

当我发现自己编写这样的代码时:

var rowDiv = "<div class='row small'> <div class='col-sm-8 small'>" 
    + json['commentary'] + " &ndash; " + json['creation_date'] 
    + "</div><div class='col-sm-4 small'>by "
    +  json['user']
    + "</div></div>"
$('#commentary-container').append(rowDiv)

我的代码气味检测器会闪烁大量红灯并发出震耳欲聋的喇叭声。在重复的字符串连接中创建结构化数据对我来说似乎是错误的。

是否有一种编程方式来创建新元素？这可能看起来像；

var rowDiv = $.div().setclass('row small').append(
    $.div().setclass('col-sm-8 small').html(json['commentary'])
) ... 

或者类似的东西？

Answer 1

如果您要动态创建许多元素，您可以考虑使用模板库，例如 Handlebars或 mustache 。使用 jQuery，您可以这样创建元素:

var $rowDiv = $('<div/>', {
   'class': 'row small',
   'html' : $('<div/>', { 'class': 'col-sm-8 small' }).html(json['commentary'])
});

这是如何工作的？

jQuery 检查指定属性是否有相应的方法，如果有相应的方法，则使用指定的值调用该方法，否则使用 .attr() 方法。

// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
    for ( match in context ) {
        // Properties of context are called as methods if possible
        if ( jQuery.isFunction( this[ match ] ) ) {
            this[ match ]( context[ match ] );

        // ...and otherwise set as attributes
        } else {
            this.attr( match, context[ match ] );
        }
    }
}