如何在带有jQuery的动态DOM元素上使用.insertAfter？

Question

因此，当我发现无法对已动态创建的元素使用insertAfter()方法时， 我尝试使用jQuery的DOM创建工具向表中动态添加一行，呈现此代码：

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

无用的，因为那正是我在做什么。 尝试在动态元素上使用insertAfter 。

仍然能产生干净代码的最简单，最有效的解决方案是什么？

Answer 1

首先， 可以在动态创建的DOM元素上使用insertAfter 。 只有它们需要有一个父节点，以便有一棵树可以在其中插入“下一个”元素。 您要在<td>上调用insertAfter ，然后将其附加到<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 }));

Answer 2

据我了解，您需要连续插入两个单元格。 您需要在append方法中同时使用两个td元素。

<h2></h2>

    $(document).ready(function () {
    var row = $('<tr></tr>').append(($('<td></td>', { html: "test1" })), ($('<td></td>', { html: "test2" })));
    $("h2").append(row);
})