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

How to use .insertAfter on dynamic DOM elements with jQuery?

本文关键字：insertAfter jQuery 元素 动态 DOM      更新时间：2023-09-26

所以我尝试使用 jQuery 的DOM创建工具动态地向表中添加一行，当我发现你不能对已动态创建的元素使用 insertAfter() 方法时，呈现如下：

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

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

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

首先，您可以在动态创建的 DOM 元素上使用insertAfter。只有它们需要有一个父节点，以便有一个树可以插入"下一个"元素。在将该<td>附加到<tr>之前，您正在该上调用insertAfter。以下方法将起作用：

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

即使有多个参数，OT

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

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

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