Question

我想在每个现有的<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，但似乎不起作用。谢谢

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

Answer 2

您必须遍历<tr>标签。

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

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

为 @ T.J。 Crowder 在评论中指出，请注意如何通过检查<tr>是否真实来增加当前步骤nextElementSibling的下一个同级兄弟。

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>

Answer 3

您需要使用querySelectorAll获取所有与选择器匹配的元素，然后在裸for循环中或使用Array.prototype.forEach在每个元素之后创建广告插入新的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>

如何用纯JS每次插入

3 个答案: