Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][JavaScript] insertBefore + forEach
stellatus
post 26.03.2020, 14:55:12
Post #1





Grupa: Zarejestrowani
Postów: 131
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
stellatus
post 27.03.2020, 12:22:00
Post #2





Grupa: Zarejestrowani
Postów: 131
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post

Posty w temacie
- stellatus   [HTML][JavaScript] insertBefore + forEach   26.03.2020, 14:55:12
- - nospor   Komunikat bledu chyba dosc jasno nakierowuje.... ...   26.03.2020, 15:13:37
- - stellatus   Dzięki. Błąd zniknął, ale to insertBefore nie dzia...   26.03.2020, 15:45:59
- - nospor   Hehe, to dlatego ze zawsze wkladasz dokladnie ten ...   26.03.2020, 15:48:14
- - stellatus   Dzięki. A jak to zrobić? Nie mam kompletnie żadneg...   26.03.2020, 16:21:48
- - nospor   no toz napisalem co masz zrobic.... masz za kazdym...   26.03.2020, 16:23:23
- - stellatus   Dziękuję Ci, bardzo mi pomogłeś. Zastanawia mnie ...   27.03.2020, 10:33:44
- - nospor   Bo ona nie jest deklarowana w petli tylko w funkcj...   27.03.2020, 10:35:02
- - stellatus   OK, więc żeby lepiej zrozumieć o co tutaj chodzi, ...   27.03.2020, 10:44:46
- - nospor   Deklarowana zmienna w funkcji to zmienna lokalna t...   27.03.2020, 10:53:48
- - stellatus   OK, ale jak się robi redeklarację poza funkcją to ...   27.03.2020, 11:22:57
- - nospor   To pokaz sytuacje z takim bledem, bo ja nie raz w ...   27.03.2020, 11:24:10
- - stellatus   Sorry, nieprecyzyjnie się wyraziłem. Nie chodziło ...   27.03.2020, 11:37:57
- - nospor   Przepraszam, nie rozumiem co piszesz. Zrobilem te...   27.03.2020, 11:51:21
- - stellatus   spróbuj proszę z letami i constami   27.03.2020, 11:57:53
- - nospor   Skoro uzywasz CONSTow znaczy, ze uzywasz tez es6. ...   27.03.2020, 12:17:28
- - stellatus   OK. No więc właśnie dlatego m.in. miałem problem z...   27.03.2020, 12:22:00


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 5.06.2020 - 18:01