Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="mylist">
    <li class="one">Papayas</li>
    <li>Lemons</li>
    <li><span>Oranges</span></li>
    <li>Frankfurters</li>
    <li class="five">Eggs</li>
  </ul>
  
  <p>Number of items in the list: <output></output></p>
  <p>HTML Content of third item: <output></output></p>
  <p>Class name of first item: <output></output></p>
  <p>Class name of last item: <output></output></p>
</body>
</html>
 
myList = document.querySelector('.mylist');
myOps = document.getElementsByTagName('output');
myOps[0].innerHTML = myList.childElementCount;
myOps[1].innerHTML = myList.children[2].innerHTML;
myOps[2].innerHTML = myList.firstElementChild.className;
myOps[3].innerHTML = myList.lastElementChild.className;
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ImpressiveWebspro
0viewers