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

首先，可以在动态创建的DOM元素上使用insertAfter。只有他们需要有一个父节点，因此有一棵树可以插入“next”元素。您在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 }));

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

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

2 个答案: