This function should do the trick:
function insert_headers(my_class)
{
//get your content element
var contents = document.getElementsByClassName(my_class);
//loop on the elements found
for(var i=0;i<contents.length;i++)
{
var content = contents[i];
//get the html content
var html_content = content.innerHTML;
//replace the h3 tags to insert the span ones
html_content = html_content.replace('<h3>', '<div class="headers"><h3>');
html_content = html_content.replace('</h3>', '</h3></div>');
//set the html content back
content.innerHTML = html_content;
}
}
So if you have this:
<div class="content>
<h3>This is test text</h3>
</div>
and you do this:
insert_headers('content');
you'll get this:
<div class="content>
<div class="headers"><h3>This is test text</h3></div>
</div>