javascript - 如何使用 jQuery 在动态 DOM 元素上使用 .insertAfter？

Question

因此，我尝试使用 jQuery 的 DOM 创建工具动态地将一行添加到表中，当 I discovered that you cannot use the insertAfter() method on elements that have been dynamically created ，呈现此:

var row = $('<tr></tr>')
  .append($('<td></td>', { html: firstVal })
      .insertAfter($('<td></td>', { html: secondVal  }) // This doesn't work!
      )
  );

没用，因为这正是我正在做的事情。尝试在动态元素上使用 insertAfter。

最简单、最有效的解决方案是什么，并且仍能生成干净的代码？

Answer 1

首先，您可以使用insertAfter动态创建的 DOM 元素。只需它们需要有一个父节点，这样就有一个可以插入“下一个”元素的树。您正在调用insertAfter在那<td>在将其附加到 <tr> 之前。以下内容可行:

var td1 = $('<td></td>', { html: firstVal }),
    td2 = $('<td></td>', { html: secondVal });

var row = $('<tr></tr>').append(td1);
td1.insertAfter(td2);

但是，您真正想要做的是使用 append 多次:

var row = $('<tr></tr>')
    .append($('<td></td>', { html: firstVal }))
    .append($('<td></td>', { html: secondVal }));

即使有多个参数:

var row = $('<tr></tr>')
    .append($('<td></td>', { html: firstVal }),
            $('<td></td>', { html: secondVal }));