Question

我有这个功能，我用它来使用jQuery的append()函数在论坛板上创建一个新类别。它工作正常，但我想知道是否有更简单和/或更快的方法可以做到这一点。

这是我的代码：

function createCategory() {
    $(parent).prepend('<div id="CategoryGroup-favourites" class="CategoryGroup"></div>');
    $('#CategoryGroup-favourites').append('<h2 class="H">Favourites</h2>')
                                .append('<div class="DataTableWrap"></div>');
    $('#CategoryGroup-favourites .DataTableWrap').append('<table class="DataTable CategoryTable"></table>');
    $('#CategoryGroup-favourites table').append('<thead></thead>')
                                        .append('<tbody></tbody>');
    $('#CategoryGroup-favourites thead').append('<tr></tr>');
    $('#CategoryGroup-favourites tr').append('<td class="CategoryName"></td>')
                                .append('<td class="BigCount CountDiscussions"></td>')
                                .append('<td class="BigCount CountComments"></td>')
                                .append('<td class="BlockColumn LatestPost"></td>');
}

任何有助于简化此事的帮助都会很好。

Answer 1

@Bryan在他的评论中得到的是，既然你用jQuery添加任意HTML，为什么不一次完成呢？您重复添加一个元素，然后选择它，添加它，然后选择那个添加，依此类推。相反，只需完整地构建新的div，然后在其前面添加：

function createCategory() {
  var newDivHtml = '\
  <div id="CategoryGroup-favourites" class="CategoryGroup">\
    <h2 class="H">Favourites</h2>\
    <div class="DataTableWrap">\
      <table class="DataTable CategoryTable">\
        <thead>\
          <tr>\
            <td class="CategoryName"></td>\
            <td class="BigCount CountDiscussions"></td>\
            <td class="BigCount CountComments"></td>\
            <td class="BlockColumn LatestPost"></td>\
          </tr>\
        </thead>\
        <tbody></tbody>\
      </table>\
    </div>\
  </div>';

  $(parent).prepend(newDivHtml);
}

这是一个sample jsfiddle，其中包含两个版本的createCategory。如果在运行后检查元素，它们应该是相同的。

Answer 2

jquery动态创建元素

$("<div/>",{
    "class" : "someelement",
    // .. you can go on and add properties
    "css" : {
        "color" : "red"
    },
    "click" : function(){
        alert("you just clicked me!!");
    },
    "data" : {
       "foo" : "bar"
    }
}).appendTo("#container");

创建div并动态设置id，class，css，event 如果您要设置多个属性，这是可行的方法。比通过长串更干净。

使用jQuery更简单

2 个答案: