How to wrap headers within a span from specific division using javascript

Question

This is my actual code:

<div class="content">
<h3>This is test text</h3>
</div>

I want it like this:

<div class="content">
<div class="headers"><h3>This is test text</h3></div>
</div>

NB I'm using Joomla!

Answer 1

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>