如何使用纯 JS 在每个 <tr> 之后插入 <tr>答案

【问题标题】：How to insert <tr> after every <tr> with pure JS如何使用纯 JS 在每个 <tr> 之后插入 <tr>
【发布时间】：2018-07-06 13:41:51
【问题描述】：

我想在每个现有的<tr> 之后插入新的<tr>。我的功能：

var element = document.querySelector('tr.cart-item');
var newElement = document.createElement('tr');
newElement.className = "tr-spacer";
var elementParent = element.parentNode;
elementParent.insertBefore(newElement, element.nextSibling);

但它仅在第一个<tr> 之后插入<tr>，是否可以在每个现有<tr> 之后插入<tr>？我也尝试过querySelectorAll 或insertRow，但它似乎不起作用。谢谢你

【问题讨论】：

使用.querySelectorAll() 代替.querySelector() ?
这听起来像an X/Y problem。无论你想用“spacer”trs 做什么，你可能都想用 CSS 来代替。 :-)

标签： javascript insert tr

【解决方案1】：

它与querySelectorAll 配合得很好。你没有显示你的代码试图使用它，但你会有一个循环：

var list = document.querySelectorAll('tr.cart-item');
for (var i = 0; i < list.length; ++i) {
    var element = list[i];
    var newElement = document.createElement('tr');
    newElement.className = "tr-spacer";
    element.parentNode.insertBefore(newElement, element.nextSibling);
}

或在现代浏览器上（或使用 polyfill，这是微不足道的；更多信息请参见 this answer）：

document.querySelectorAll('tr.cart-item').forEach(function(element) {
    var newElement = document.createElement('tr');
    newElement.className = "tr-spacer";
    element.parentNode.insertBefore(newElement, element.nextSibling);
});

或（同样是现代浏览器）：

for (const element of document.querySelectorAll('tr.cart-item') {
    const newElement = document.createElement('tr');
    newElement.className = "tr-spacer";
    element.parentNode.insertBefore(newElement, element.nextSibling);
}

【讨论】：

（唉，编辑错误：如果在上面的代码块中没有看到querySelectorAll，请点击刷新。）
我不得不做一些错字，因为我试过你的第一个例子，但它没有用。谢谢你！

【解决方案2】：

你必须遍历你的 <tr> 标签。

首先使用querySelectorAll而不是querySelector选择它们。

然后循环遍历它们并在每个之后添加一个新的。

作为 @T.J. Crowder 在 cmets 中指出，请注意如何通过检查 nextElementSibling 是否为真来检查当前 <tr> 是否有下一个兄弟姐妹。

let lines = document.querySelectorAll('tr');

for(let line of lines){
  let newLine = document.createElement('tr');
  newLine.innerText = 'Inserted';
  if(line.nextElementSibling) line.parentNode.insertBefore(newLine, line.nextElementSibling);
}

<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>

【讨论】：

【解决方案3】：

您需要使用querySelectorAll 获取与选择器匹配的所有元素，然后在裸for 循环中或使用Array.prototype.forEach create ad 在每个元素后插入新的tr：

[].forEach.call(document.querySelectorAll('tr.cart-item'), function (element) {
  var newElement = document.createElement('tr');
  newElement.className = "tr-spacer";
  element.parentNode.insertBefore(newElement, element.nextSibling);
});

<table>
  <tr class="cart-item">
    <td>First</td>
  </tr>
  <tr class="cart-item">
    <td>Second</td>
  </tr>
  <tr class="cart-item">
    <td>Third</td>
  </tr>
</table>

【讨论】：