I am having trouble with iterating over a nodeList to alter certain elements inside those nodes. Here is the html:

 <div class="row one-dish-row dish1">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish2">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish3">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

I created a nodeList (as an array) of all the elements with the class ".one-dish-row", and tried to access the h4 element within one of them to alter it. Here is the js:

  const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));
    dishNodeList[1].find("h4").innerHtml = "Hello I am Ghadir";

It is not working ('Falafel' is not changing into 'Hello I am Ghadir'). I get the following error in the console: Uncaught TypeError: dishNodeList[1].find is not a function.

I don't know what exactly is wrong with my code. Any help is appreciated.

I am having trouble with iterating over a nodeList to alter certain elements inside those nodes. Here is the html:

 <div class="row one-dish-row dish1">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish2">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish3">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

I created a nodeList (as an array) of all the elements with the class ".one-dish-row", and tried to access the h4 element within one of them to alter it. Here is the js:

  const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));
    dishNodeList[1].find("h4").innerHtml = "Hello I am Ghadir";

It is not working ('Falafel' is not changing into 'Hello I am Ghadir'). I get the following error in the console: Uncaught TypeError: dishNodeList[1].find is not a function.

I don't know what exactly is wrong with my code. Any help is appreciated.

• javascript
• jquery
• find

Share Improve this question Follow asked Jan 8, 2020 at 14:15 GhadirGhadir 54711 gold badge1111 silver badges2525 bronze badges 3

• 2 But you're not using the jQuery find here, you have a plain array and call find on a DOM Node – VLAZ Commented Jan 8, 2020 at 14:16
• Are you actually looking for a jQuery solution or just plain JavaScript? – VLAZ Commented Jan 8, 2020 at 14:19
• Any solution will be fine as long as I understand what is going on. – Ghadir Commented Jan 8, 2020 at 15:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You should make sure you're keeping track of which variables contain a HTMLCollection / NodeList, and which ones are jQuery Objects; because it will change which Methods you have access to.

jQuery .find() is called from a jQuery Object, and you're using it on a NodeList; so instead of jQuery find(), you're trying to use Javascript .find()

There's two approaches for this, if you're wanting to use jQuery Methods or Javascript methods

---

For jQuery, create your jQuery Object by wrapping in $( ), and then you can access the right Methods - use .find() to return the matching element ( still as a jQuery Object ) and .text() to change the text of that Element

---

For Javascript, you can use .querySelector() from your NodeList item to select down, and then edit the .textContent property to insert the text you want

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));

// jQuery
$(dishNodeList[1]).find('h4').text('Hello I am Ghadir');

// JavaScript
dishNodeList[1].querySelector('h4').textContent = 'Hello I am Ghadir';

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row one-dish-row dish1">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

<div class="row one-dish-row dish2">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

<div class="row one-dish-row dish3">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

There are 2 things, you are using Array.prototype.find() and innerHtml:

1. First one can be used on arrays and need a function to find the elements and that's the reason why you got the error message, instead you should use getElementsByTagName('h4'),
2. There is a mistake with the name, you should use innerHTML instead.

Like the following:

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));
const h4Elements = dishNodeList[1].getElementsByTagName('h4');
const h4 = h4Elements[0];
h4.innerHTML = "Hello I am Ghadir";

<div class="row one-dish-row dish1">
  <div class="dishes-container">
      <h4>Falafel</h4>
      <p></p>
    </div>
    <div class="prices-container">
      <h5></h5>L.L.
    </div>
  </div>

  <div class="row one-dish-row dish2">
    <div class="dishes-container">
      <h4>Falafel</h4>
      <p></p>
    </div>
    <div class="prices-container">
      <h5></h5>L.L.
    </div>
  </div>

  <div class="row one-dish-row dish3">
    <div class="dishes-container">
      <h4>Falafel</h4>
      <p></p>
    </div>
    <div class="prices-container">
      <h5></h5>L.L.
    </div>
  </div>
</div>

Hope that helps!

jQuery is using .find().text() :

$('.one-dish-row').eq(1).find("h4").text("Hello I am Ghadir")

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row one-dish-row dish1">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>
<div class="row one-dish-row dish2">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

<div class="row one-dish-row dish3">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

DOM is using querySelector and innerHTML (spelling!!!) or textContent

const dishNodeList = document.querySelectorAll('.one-dish-row');
dishNodeList[1].querySelector("h4").textContent = "Hello I am Ghadir";

<div class="row one-dish-row dish1">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>
<div class="row one-dish-row dish2">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

<div class="row one-dish-row dish3">
  <div class="dishes-container">
    <h4>Falafel</h4>
    <p></p>
  </div>
  <div class="prices-container">
    <h5></h5>L.L.
  </div>
</div>

You are using the find method on a html collection (HTMLDivElement).

When you console.log ( h4Elements = dishNodeList[1].getElementsByTagName('h4')); it returns null. you will need to go down DOM tree one layer after another before you set the inner.HTML elements of h1 .

i have broken down this to you as below.

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));        
const dishNodeListOne = dishNodeList[1];        
const firstElchild = dishNodeListOne.firstElementChild;
const firstChildEl = firstElchild.firstElementChild;
 firstChildEl.innerHTML= 'Hello I am Ghadir';