Dynamically replace html tags

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

Far out. Well, (a), make it so you don't need to do that. :) Or (b):

1. Get a reference to that ul tag somehow. give it an id attribute and use: document.getElementById("theULTag"). Or, if it's the first UL tag on the page for example, use document.getElementsByTagName("ul").item(0)

2. Now set a variable equal to this element's innerHtml attribute. For example: var textToChange = document.getElementById("theULTag").innerHTML

3. learn about javascript string manipulation here, and do what you need to do. (You might need to strip out spaces to make it easier on yourself)

4. Put your new text back in with document.getElementById("theULTag").innerHTML = newText

Good luck!

Answer 2

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 ;) !