动态替换html标签

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

Answer 2

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!