javascript - 如何使用纯JS在每个之后插入

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