How can I access the content of an HTML element from a node list?

Question

I can't seem to access the content of certain elements and I think it must be because of the syntax I'm using. I'm trying to write and overwrite members of a getElementsByClassName list. I understand that it is a nodeList and not an array, but I still can't figure it out. Here's what I have/have tried:

HTML:

<span class="myclass">Text</span>
<span class="myclass">Text2</span>

JS:

var spanarray = document.getElementsByClassName("myclass");
//I've tried all of the following (for the record, I thought either 2 or 5 would work)
spanarray[0] = "Replacement text";
spanarray[0].innerHTML = "Replacement text";
spanarray.item(0) = "Replacement text";
spanarray.item(0).innerHTML = "Replacement text";
spanarray.item(0).nodeValue = "Replacement text";

I'd really appreciate if somebody could point me in the right direction. Thanks.

Answer 1

The following (your 2nd example) works:

var spanarray = document.getElementsByClassName("myclass");
spanarray[0].innerHTML = "ABC"

Here's a jsfiddle and try in your browser: http://jsfiddle.net/N4fjX/ .

Post the remainder of your page if you've got further issues.

Answer 2

Judging from your comments, it might be the case where your Javascript is being processed before your entire page is rendered.

To make sure it has rendered, try

window.onload = setText(); 
function setText()
{
    var spanarray = document.getElementsByClassName("myclass");
    spanarray[0].innerHTML = "Replacement text";
}

Answer 3

It turns out that my problem was the PHP being called from an external JS function via AJAX, so while the PHP-generated content showed up in the browser, the elements were not actually visible under "View Source" and therefore not accessible by the JS. I should have mentioned the PHP part in the original post but I didn't think it mattered.

DOESN'T WORK:

loadText.php

<?php
echo "<span class='myclass'>This text should be replaced</span>"
?>

HTML

<div id='somediv'>
  <script type="text/javascript">loadText();</script>
</div>
...
<script type="text/javascript">
  var spanarray = document.getElementByClassName("myclass"); //doesn't work in IE6-9
  spanarray[0].innerHTML = "Replacement Text";
</script>

JS

function loadText(){
  var somediv = document.getElementById("somediv");
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      somediv.innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","loadText.php",true);
  xmlhttp.send();
}

SOLUTION:

Instead of jumping through extra loops with AJAX, execute the PHP directly on the HTML page. If AJAX is absolutely necessary, then I'm not really sure what the solution would be. Plymouth223 and Jonathan Chow have provided the correct JS syntax.