Grabbing inner html tags with Javascript

Question

I am trying to get the objects for the inner <li> for this html. The one with the id=config_#

  <li class="browser_list">
    <ul>
      <li id="config_3"> Chrome 29</li>
      <li id="config_4"> Chrome 31</li>
      <li id="config_5"> Chrome 33</li>
      <li id="config_6"> Chrome 35</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_1">Firefox 11</li>
      <li id="config_2">Firefox 15</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_0">Internet Explorer 8</li>
    </ul>
  </li>

My code:

var list = document.getElementsByClassName("browser_list");
console.log(list);

for (var i = 0; i < list.length; i++) {
    var items = list.getElementsByTagName("li");
    console.log(items);
}

console.log(list) works fine but when I try to getElementsByTagName("li") I get the error:

Uncaught TypeError: undefined is not a function

I feel as though I am missing something but as I am new to JS I am not sure what it is

Why not access the objects directly with document.getElementById(""); — brso05
– brso05, Commented Oct 22, 2014 at 17:29

Jason Nichols · Accepted Answer · 2014-10-23 02:29:14Z

2

list is an array. Each element of the array is an HTMLElement

you'd need to use list[i].getElementsByTagName

JavaScript Arrays don't have the method .getElementsByTagName

edited Oct 23, 2014 at 2:29

answered Oct 22, 2014 at 17:35

Jason Nichols

3,7703 gold badges32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Nichols Over a year ago

derp. I can't believe I missed that.

PrakashSharma · Accepted Answer · 2014-10-22 17:45:51Z

The getElementByClassName creates an array as more than 1 browser_list are found. So access it proper index.

var list = document.getElementsByClassName("browser_list");
console.log(list);

for (var i = 0; i < list.length; i++) {
    var items = list[i].getElementsByTagName("li");
    console.log(items);
}

  <li class="browser_list">
    <ul>
      <li id="config_3"> Chrome 29</li>
      <li id="config_4"> Chrome 31</li>
      <li id="config_5"> Chrome 33</li>
      <li id="config_6"> Chrome 35</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_1">Firefox 11</li>
      <li id="config_2">Firefox 15</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_0">Internet Explorer 8</li>
    </ul>
  </li>

Collectives™ on Stack Overflow

Grabbing inner html tags with Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related