Question

I’m trying to replace some html tags which are being generated by ajax script. Ajax script generates the following ul list:

<ul>
  <li class="odd">some text</li>
  <li class="even">some text</li>
  <li class="odd"><hr /></li>
  <li class="even">some text</li>
</ul>

I need to replace <li class="odd"><hr /></li> with </ul><hr /><ul>. I guess it has to be some javascript to dynamically replace those tags everytime the list is being generated, but I don’t know how to do it exactly. Could you please point me to the right track?

Any help is greatly appreciated.

Answer 1

First, you should assign an id to your such that it is easier to access :

<ul id='myTag'>
    [...]
</ul>

Then, you can use string manipulation and the innerHTML property to do what you want :

var html = document.getElementById('myTag').innerHTML;
document.getElementById('myTag').innerHTML = html.replace('<li class="odd"><hr /></li>', '</ul><hr /><ul>');

You could of course use fancy javascript libraries like jQuery or prototype to do the same, but this is the “roots” way 😉 !