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()方法设置该值。 / p>

// 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 ] );
        }
    }
}

Answer 2

您可以将新的div元素创建为新的jQuery元素，并使用函数设置其类/内容，然后只需将jQuery元素附加到您想要的任何位置。尝试这样的事情：

var newDiv = $('<div/>').addClass('row small').html(json['commentary']);
$('#commentary-container').append(newDiv);

Answer 3

对于这种类型的东西，我过去曾使用像手柄这样的模板系统（http://handlebarsjs.com/)。它基本上允许你定义可以轻松注入数据的模板。你的例子可能看起来像这样模板：

<div class='row small'> 
  <div class='col-sm-8 small'>
    {{commentary}} &ndash; {{creation_date}}
  </div>
  <div class='col-sm-4 small'>
    by {{user}}
  </div>
</div>"

看看车把现场。我认为他们在布置一些基本的例子方面做得很好。

Answer 4

你可以做类似的事情 -

$("<input>").addClass('row small').appendTo("#add");

请参阅此JSFiddle添加新输入和类

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

4 个答案: