Question

我想一个接一个地向Dom元素添加两个HTML元素。但是这个调用不适用于jQuery

$("<button>click me</button>").after("<span> or be happy </span>")
                              .appendTo("#someId");

我无法将两个元素组合在一个字符串中的原因是我想在第一个字符串中添加一个事件处理程序。所以我真正想做的是：

$("<button>click me</button>").after("<span> or be happy </span>")
                              .on("click", function() {
                                  // do something
                              });

现在，我的解决方法是为按钮分配一个id，并在单独的jQuery调用中添加“span”。像这样......

$('<button id="uid">click me</button>').on("click", function() {
                                            // do something
                                           });
$('#uid').after('<span> or be happy</span>');

有更好的方法吗？

Answer 1

只需.after()之后的.append()。

http://jsfiddle.net/Kr9m4/

$("<button>click me</button>").on("click", function() {
    // do something
})
    .appendTo("#someId")
    .after("<span> or be happy </span>");

或者像这样：

http://jsfiddle.net/Kr9m4/1/

$("<button>", { text:"click me",
               click: function() {
                  // do something
               }})
    .appendTo("#someId")
    .after("<span> or be happy </span>");

Answer 2

你应该这样做：

var _button = $('<button>')
                  .text('click me')
                  .on('click', function () { }),
    _span = $('<span>').text(' or be happy');

// not sure about the order, so just switch these two if ever
$('#foo').after(_button).after(_span);

修改

根据the documentation，即使节点尚未断开连接，您也可以实际插入DOM节点（并进行操作）。这假设是jQuery 1.4+。

因此，如果您符合该法案，您应该能够在一个陈述中完成所有这些：

$('<button>').text('click me')
             .on('click', function () {
                 // ...
             })
             .after('<span>')
                 .text(' or be happy')
                 .appendTo('#uid')
                 ;

“after”方法不适用于DOM中尚未使用的元素

2 个答案:

修改