[HTML][JavaScript] insertBefore + forEach Opcje

[stellatus]

Utworzyłem element "newItem" (<h3>Water</h3>). Chciałbym go wstawić przed każdym bezpośrednim dzieckiem "div.facetwp-facet-tags" z klasą "facetwp-checkbox". Robię więc pętlę forEach, która za pomocą "insertBefore" wkleja ten "newItem" przed każdym "referenceNode", czyli zmiennej "element" w tym przypadku. Czy ten tok myślenia jest dobry? Jeżeli tak, to dlaczego to nie działa? Pojawia się: "TypeError: list.insertBefore is not a function".

https://codepen.io/rudolph-reti/pen/QWbJQJr

Kod

<div class="facetwp-facet-tags">
  <div class="facetwp-checkbox" data-value="arbeit">
    Arbeit <span class="facetwp-counter">(4)</span>
    <span class="facetwp-expand">[+]</span>
  </div>
  <div class="facetwp-depth">
    <div class="facetwp-checkbox" data-value="arbeitsrecht">
      Arbeitsrecht <span class="facetwp-counter">(4)</span>
    </div>
    <div class="facetwp-checkbox" data-value="gastronomie">
      Gastronomie <span class="facetwp-counter">(4)</span>
    </div>
  </div>
  <div class="facetwp-checkbox" data-value="autarkie">
    Autarkie <span class="facetwp-counter">(2)</span>
  </div>
  <div class="facetwp-checkbox" data-value="bach-johann-sebastian">
    Bach, Johann Sebastian <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="ludwig-van-beethoven">
    Beethoven, Ludwig van <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="behinderten">
    Behinderten <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="bioinformatik">
    Bioinformatik <span class="facetwp-counter">(1)</span>
  </div>
  <div class="facetwp-checkbox" data-value="christentum">
    Christentum <span class="facetwp-counter">(4)</span>
    <span class="facetwp-expand">[+]</span>
  </div>
</div>

<script>
  const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox");
  //console.log(list)

  let newItem = document.createElement("h3");
  let textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);

  //console.log(newItem)

  list.forEach(function(element, index, array) {
    list.insertBefore(newItem, element);
  });
</script>

Ten post edytował stellatus 26.03.2020, 15:35:35

[nospor]

Skoro uzywasz CONSTow znaczy, ze uzywasz tez es6. No tam sytuacja jest inna. Tak, tam nie mozesz sobie zadeklarowac kilka razy tej samej zmiennej ot tak (nie liczac rzecz jasna petli i funkcji bo one sa traktowane inaczej)