Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] insertBefore + forEach
Forum PHP.pl > Forum > Przedszkole
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>
nospor
Komunikat bledu chyba dosc jasno nakierowuje....

list to twoja lista nie element. Element masz w paramatrze funkcji
list.forEach(function(element, index, array) {
element.insertBefore(newItem, element);
});

edit: zas w dokumentacji widze ze to maby rodzic na ktorym jest wykonywany insertBefore wiec

tuMaBycRodzic.insertBefore(newItem, element);
stellatus
Dzięki. Błąd zniknął, ale to insertBefore nie działa tak jak oczekiwałem. Nie wkleja "newItem" przed każdym elementem listy, tylko przed tym, na którym zatrzymuje się pętla. Co zrobić, żeby wkleić "newItem" przed każdym elementem listy?

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

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

  //console.log(newItem.innerHTML)

  list.forEach(function(element, index, array) {
    parent.insertBefore(newItem, element);
  });


nospor
Hehe, to dlatego ze zawsze wkladasz dokladnie ten sam element
newItem
I on wedruje pokolei z listy do listy wink.gif
Albo w petli tworz za kazdym razem nowy element do wlozenia, albo go klonuj
stellatus
Dzięki. A jak to zrobić? Nie mam kompletnie żadnego pomysłu (nawet na to co wpisać do googla).
nospor
no toz napisalem co masz zrobic.... masz za kazdym razem tworzyc nowe element do wlozenia

Kod
  //console.log(newItem.innerHTML)

  list.forEach(function(element, index, array) {
let newItem = document.createElement("h3");
  let textnode = document.createTextNode("Water");
  newItem.appendChild(textnode);

    parent.insertBefore(newItem, element);
  });

I juz
stellatus
Dziękuję Ci, bardzo mi pomogłeś.

Zastanawia mnie jedna rzecz. Nie wiem czy poprawnie formułuję to pytanie: dlaczego gdy w pętli deklarowana jest zmienna nie pojawia się błąd redeklaracji?
nospor
Bo ona nie jest deklarowana w petli tylko w funkcji. A to roznica
stellatus
OK, więc żeby lepiej zrozumieć o co tutaj chodzi, to powinienem przestudiować dobrze temat "zakres zmiennych", zgadza się?
nospor
Deklarowana zmienna w funkcji to zmienna lokalna tylko dla tej funkcji.

Ale nawet jakby to nie bylo funkcja tylko petla jak myslales, to i tak to by nie wywolalo bledu. js pozwala na wielokrotne deklarowanie tych samych zmiennych. js nawet pozwala na wielokrotne deklarowanie tych samych funkcji. Ot nowa zmienna/funkcja nadpisze stara. To nie php
stellatus
OK, ale jak się robi redeklarację poza funkcją to wyskakuje błąd. Dlaczego tak jest?
nospor
To pokaz sytuacje z takim bledem, bo ja nie raz w petli redeklarowalem zmienne i bylo wszystko ok
stellatus
Sorry, nieprecyzyjnie się wyraziłem. Nie chodziło mi redeklarację w pętli. Mam zadeklarowane jakieś zmienne poza funkcjami. Uruchamiam kod w konsoli i wszystko gra. Gdy chcę go uruchomić po raz drugi pojawia się błąd redeklaracji. Jest to wkurzające, bo muszę odświeżać przeglądarkę albo wykomentować zmienne, żeby ponownie uruchomić kod.
nospor
Przepraszam, nie rozumiem co piszesz.

Zrobilem teraz test:

var ala = 2;
var ala = 4;
alert(ala);

I zadnego bledu tylko alert wyswietla mi 4, czyli tak jak mowilem, ze nastepna deklaracja nadpisuje poprzednia
stellatus
spróbuj proszę z letami i constami
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)
stellatus
OK. No więc właśnie dlatego m.in. miałem problem z tym skryptem. Myślę, że temat zamknięty. Dziękuję bardzo i pozdrawiam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.