Javascript DOM How to - Loop through elements returned from getElementsByClassName

Question

We would like to know how to loop through elements returned from getElementsByClassName.

Answer


<!DOCTYPE html>
<html>
<body>
  <div class="content">Something</div>
  <div class="content">Something Else</div>
  <div class="content">Something Else</div>
    <script type='text/javascript'>
        var html = "Something From JS";
        <!--from   ww  w  .  j  a  va  2s.c om-->
        var elements = document.getElementsByClassName("content");
        for(var x=0; x < elements.length; x++)
        {
            elements[x].innerHTML=html;
        }
    </script>

</body>
</html>

The code above is rendered as follows: