Javascript 如何在纯JS中的一行之后插入一组表行

我有以下问题： 我需要在X行之后插入N行。我需要插入的行集作为包含TR元素的HTML块传递给我的函数。我还可以访问TR，然后需要插入

这与我以前用另一个t车身更换t车身时所做的略有不同

我遇到的问题是，

appendChild

需要一个元素，但我必须插入一个集合

编辑：

以下是解决方案：

function appendRows(node, html){ 
    var temp = document.createElement("div");
    var tbody = node.parentNode;
    var nextSib = node.nextSibling;

    temp.innerHTML = "<table><tbody>"+html;
    var rows = temp.firstChild.firstChild.childNodes;

    while(rows.length){
        tbody.insertBefore(rows[i], nextSib);
    }
} 

函数appendRows（节点，html）{
var temp=document.createElement（“div”）；
var tbody=node.parentNode；
var nextSib=node.nextSibling；
temp.innerHTML=“”+html；
变量行=temp.firstChild.firstChild.childNodes；
while（rows.length）{
tbody.insertBefore（第[i]行，第i行）；
}
} 

---

请看这一行动：

---

您需要逐个追加它们。

您需要逐个追加它们。

您需要确定X行是否是最后一行

//determine if lastRow...
//if not, determine row_after_row_x
for(i in n_rows){
  if(lastRow){
    tbodyObj.appendChild(row_i_of_n);
  } else {
    tbodyObj.insertBefore(row_i_of_n, row_after_row_x);
  }
}

---

您需要确定X行是否是最后一行

//determine if lastRow...
//if not, determine row_after_row_x
for(i in n_rows){
  if(lastRow){
    tbodyObj.appendChild(row_i_of_n);
  } else {
    tbodyObj.insertBefore(row_i_of_n, row_after_row_x);
  }
}

---

altCognito所说的，请注意，如果您想使用innerHTML立即替换所有内容，因为您做了很多这样的事情，而DOM操作结果太慢。

altCognito所说的，请注意，如果您想使用innerHTML一次替换所有内容，因为您正在执行大量操作，而DOM操作的速度太慢。

IE使用innerHTML插入行时出错，因此无法正常工作。直接从马嘴里说：

---

我建议只更新tbody，但将代码附加到新结构中它所属的位置。

IE使用innerHTML插入行时出错，因此无法工作。直接从马嘴里说：

---

我建议只更新tbody，但将代码附加到新结构中它所属的位置。

使用表对象，可以在其中插入新行

var tbl = document.getElementById(tableBodyId); 
var lastRow = tbl.rows.length; 
// if there's no header row in the table, then iteration = lastRow + 1 
var iteration = lastRow; 
var row = tbl.insertRow(lastRow);

---

它将在表的末尾插入一行。

使用表对象，您可以在其中插入新行

var tbl = document.getElementById(tableBodyId); 
var lastRow = tbl.rows.length; 
// if there's no header row in the table, then iteration = lastRow + 1 
var iteration = lastRow; 
var row = tbl.insertRow(lastRow);

if(node.nextSibling && node.nextSibling.nodeName.toLowerCase() === "tr")

它将在表的末尾插入一行

if(node.nextSibling && node.nextSibling.nodeName.toLowerCase() === "tr")

这是干什么用的？我认为你不需要它。如果node.nextSibling为null，则无所谓。您可以将其传递给insertBefore，它的作用与appendChild相同

在一个tbody中，除了“tr”之外，没有其他元素可以存在

for(var i = 0; i < rows.length; i++){
    tbody.insertBefore(rows[i], node.nextSibling);

我得插一套

通常，当您考虑一次性插入一组元素时，您希望使用DocumentFragment。然而，不幸的是，您不能在DocumentFragment上设置'innerHTML'，因此您必须在上面这样的表上设置行，然后将它们逐个移动到DocumentFragment中，然后在DocumentFragment之前插入。虽然从理论上讲，这可能比添加到最终目标表中要快（由于较少的子节点列表攻击），但在实践中，通过我的测试，它实际上并没有明显更快

另一种方法是insertAdjacentHTML，这是一种仅限于IE的扩展方法。不幸的是，您不能在tbody的子对象上调用insertAdjacentHTML，正如由于IE错误而无法设置tbody.innerHTML一样。您可以在DocumentFragment中设置它：

var frag= document.createDocumentFragment();
var div= document.createElement(div);
frag.appendChild(div);
div.insertAdjacentHTML('afterEnd', html);
frag.removeChild(div);
node.parentNode.insertBefore(frag, node.nextSibling);

不幸的是，不知何故，insertAdjacentHTML由于某种神秘的原因在这种情况下工作得非常慢。对于我来说，上述方法的速度大约是“逐个插入”之前速度的一半-(

这是干什么用的？我想你不需要它。如果node.nextSibling为null，那没关系。你可以将它传递给insertBefore，它的作用与appendChild相同

在一个tbody中，除了“tr”之外，没有其他元素可以存在

for(var i = 0; i < rows.length; i++){
    tbody.insertBefore(rows[i], node.nextSibling);

我得插一套

通常，当您考虑一次插入一组元素时，您希望使用DocumentFragment。但是，不幸的是，您不能在DocumentFragment上设置“innerHTML”，因此您必须在上面这样的表上设置行，然后将它们逐个移动到DocumentFragment中，然后在DocumentFragment之前插入。虽然这可能从理论上讲，它比追加到最终目标表中要快（因为对childNodes列表的攻击更少），但在实践中，通过我的测试，它实际上并没有明显地快

另一种方法是insertAdjacentHTML，这是一种仅适用于IE的扩展方法。不幸的是，您不能在tbody的子级上调用insertAdjacentHTML，正如由于IE错误而无法设置tbody.innerHTML一样。您可以在DocumentFragment中设置它：

var frag= document.createDocumentFragment();
var div= document.createElement(div);
frag.appendChild(div);
div.insertAdjacentHTML('afterEnd', html);
frag.removeChild(div);
node.parentNode.insertBefore(frag, node.nextSibling);

---

不幸的是，不知何故，由于某种神秘的原因，insertAdjacentHTML在这种情况下工作得非常慢。对于我来说，上述方法的速度大约是逐个insertBefore方法的一半。：-（

在最后位置以外的任何位置插入行时，这对我来说效果更好

var rowNode=refTable.insertRow（0）；
var cellNode=rowNode.insertCell（）；

在最后位置以外的任何位置插入行时，这对我来说效果更好

var rowNode=refTable.insertRow（0）；
var cellNode=rowNode.insertCell（）

谢谢，我要试试。实际上我非常接近，只是想找出要调用的对象。insertBefore on。希望这会起作用。谢谢，我要试试。我非常接近，只是想找出要调用的对象。insertBefore on on。希望这会起作用。我不能一下子取代一切，对吗因为那样我就需要替换tbody，我做不到。你知道用innerHTML替换某些行并保留其他行的方法吗？我不能一次替换所有行，因为那样我就需要替换tbody，而我做不到。你知道替换某些行并保留其他行的方法吗谢谢你指出第一部分。如果一切都好的话，我移除丑陋的部分。我也