Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][JavaScript] insertBefore + forEach
stellatus
post
Post #1





Grupa: Zarejestrowani
Postów: 196
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
Post #2





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

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


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


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
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 12.10.2025 - 20:04