How to insert after every with pure JS

Question

I would like to insert new <tr> after every existing <tr>. My function :

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

but it insert <tr> only after first <tr>, is it possible insert <tr> after every existing <tr>? I also tried querySelectorAll or insertRow but it does not seem to work. Thanks you

This sounds like [an X/Y problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). Whatever you want to do with "spacer" `tr`s, you probably want to do with CSS instead. :-) — T.J. Crowder, Jul 06 '18 at 13:43

score 1 · Accepted Answer · answered Jul 06 '18 at 13:45

It works just fine with querySelectorAll. You didn't show your code trying to use that, but you'd have a loop:

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

or on modern browsers (or with a polyfill, which is trivial; more in 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);
});

or (again, modern browsers):

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

*(Sigh, editing error: If you don't see `querySelectorAll` in the code blocks above, hit refresh.)* — T.J. Crowder, Jul 06 '18 at 13:48
I had to do some typo, cause Ive tried your first example, but it didnt work. Thanks you! — Gore, Jul 06 '18 at 13:58

Zenoo · Answer 2 · 2018-07-06T14:33:44.520

You'll have to loop through your <tr> tags.

First select them all using querySelectorAll instead of querySelector.

Then loop through them and add a new one after each.

As @T.J. Crowder pointed out in the comments, notice how there's an added step to check if the current <tr> has a next sibling by checking if nextElementSibling is truthy.

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>

score 0 · Answer 3 · answered Jul 06 '18 at 13:51

You need to get all elements matching selector using querySelectorAll and then either in naked for loop or using Array.prototype.forEach create ad insert new tr after each element:

[].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>

How to insert after every with pure JS

3 Answers3