javascript - Greasemonky: How to return count and value of specific div class? -

lets have following on page:

<div class="data-container">john</div> <div class="data-container">dave</div> <div class="data-container">bob</div> 

how can use javascript in greasemonkey count each "data-container" class, extract value (i.e. john) , display info popup? so:

1) john 2) dave 3) bob 

here got far isn't working:

 var elements = document.getelementsbyclass("data-container");  for(var i=0;i<elements.length;i++){    document.body.innerhtml= document.body.innerhtml.replace(/<div class=\"data-container\">/g,"<p style=\"text-align: center;\"><span style=\"font-size:16px;\"><strong><span style=\"background-color:#ffff00;\">"+ elements[i].classname + "</span></strong></span></p><div class=\"data-container\">");  }

edit
cbwll! here current working code:

var elements = document.getelementsbyclassname("data-container");  var contents = [];  var run = [];      (var = 0; < elements.length; i++) {  contents += elements[i].textcontent;  run += i;  final = run + contents;  }    alert(json.stringify(final));

it produces:

0123johndavebobevan 

which 0,1,2,3 & john, dave, bob, evan

any ideas on how them paired correctly "\n" in there?

var elements = document.getelementsbyclass("class"); var contents = [];  (var = 0; < elements.length; i++) {     contents += elements[i].textcontent; } 

//contents array containing names given in example.