In CSS, if you want to target a specific element that immediately follows another specific element, you would use the next-sibling combinator:

<style>
/* any 'p' that immediately follows 'div' will be red */
div + p { color: red; }
</style>

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

But how to make it in JavaScript? I tried closest, but I'm not surprised it doesn't work. If I understand its description on MDN, it is intended to work differently.

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      document.querySelector(input.closest('body > .output')).innerHTML = 'input.innerHTML';
    }
  }
</script>

How to make it work?

In CSS, if you want to target a specific element that immediately follows another specific element, you would use the next-sibling combinator:

<style>
/* any 'p' that immediately follows 'div' will be red */
div + p { color: red; }
</style>

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

But how to make it in JavaScript? I tried closest, but I'm not surprised it doesn't work. If I understand its description on MDN, it is intended to work differently.

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      document.querySelector(input.closest('body > .output')).innerHTML = 'input.innerHTML';
    }
  }
</script>

How to make it work?

• javascript

• 1 Why not use the same selector in querySelectorAll()? eg: querySelectorAll('.input + .output')? – Nick Parsons Commented Mar 30 at 11:02
• 1 This question is similar to: How to select next sibling of a certain type with JS?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – pilchard Commented Mar 30 at 11:08
• @NickParsons Maybe, but the JavaScript error message is the same. – jsx97 Commented Mar 30 at 11:13
• What error message? – Nick Parsons Commented Mar 30 at 11:16
• @pilchard This is not really different from what Nick propsed and this doesn't solve my question. – jsx97 Commented Mar 30 at 11:17

2 Answers 2

This is covered by the second flagged duplicate, Is there a way to select sibling nodes?, and basically copied from the nextElementSibling documentation but I'll put it here for now.

Iterate over each input's nextElementSiblings until you find one that contains the relevant class. Here using classList.contains

for (const input of document.querySelectorAll('.input')) {
  let el = input.nextElementSibling;

  while (el && !el.classList.contains("output")) {
    el = el.nextElementSibling;
  }

  if (el) {
    el.innerHTML = input.innerHTML;
  }
}

<div class="input" style="display: none">
  foo-1
</div>
<h3>Foo 1</h3>
<div class="output"></div>

<div class="input" style="display: none">
  foo-2
</div>
<h3>Foo 2</h3>
<div class="output"></div>

You can use Element#nextElementSibling:

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      input.nextElementSibling.innerHTML = input.innerHTML;
    }
  }
</script>