JavaScript. Вопрос по Split

Доброго времени суток Уважаемые форумчане.

Пожалуйста, подскажите, помогите решить небольшую проблему:

На странице есть несколько блоков с одинаковым классом и разным внутренним содержимым

Например:

<div class="main_class">

    <div class="left_box">

        <p>left box text here</p>

    </div>

</div>



<div class="main_class">

    <div class="middle_box">

        <p>middle box text here</p>

    </div>

</div>



<div class="main_class">

    <div class="right_box">

        <p>right box text here</p>

    </div>

</div>

Каким образом (используя Split), я могу заменить (например) символ " < " на " &lt; " и вывести результаты на странице в виде текста?

В данный момент проблема в том что, в результатах выводится одно и тоже столько раз, сколько блоков с необходимым классом найдено.

На выходе получается:

<div class="left_box">

    <p>left box text here</p>

</div>



<div class="left_box">

    <p>left box text here</p>

</div>



<div class="left_box">

    <p>left box text here</p>

</div>

Вместо ожидаемого:

<div class="left_box">

    <p>left box text here</p>

</div>



<div class="middle_box">

    <p>middle box text here</p>

</div>



<div class="right_box">

    <p>right box text here</p>

</div>

Пожалуйста, помогите решить данную проблему!

Может быть знатоки подскажут другой (отличный от Split) метод ... какой нибудь replace или еще чего нибудь :)

Заранее благодарен всем откликнувшимся!

Большое спасибо!