Как добавить текст в определенное место?

[SFproG]

Есть такой код к примеру:

<style type="text/css">
.dv {width:300px; height:30px; border:solid 1px; margin:5px;}
</style>

<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>

<script type="text/javascript">
var d = document.getElementsByClassName('dv');
var s = d.length;
var i = 2;
while (i <= s) {
var dv = document.getElementsByClassName('dv')[i];
dv.style.color = 'blue';
i += 3;
}

</script>

Каждый третий блок автоматически раскрашивается в синий цвет. Подскажите как после каждого третьего блока добавить автоматом текст, чтобы в результате получилось, типа этого:

<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
555
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
555
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
555

Не знаю какие функции в яваскрипт использовать для вставки текста.

Edited February 7, 2013 by SFproG

[Great Rash]

Читайте про insertBefore и createTextNode

[SFproG]

Пытаюсь как-то так сделать:

<style type="text/css">
.dv {width:300px; height:30px; border:solid 1px; margin:5px;}
</style>

<div id="div">
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</div>

<script type="text/javascript">
var d = document.getElementsByClassName('dv');
var div = document.getElementById('div');
var dv = document.getElementsByClassName('dv');
var txt = document.createTextNode('555');
var s = d.length;
var i = 2;
while (i <= s) {
dv[i].style.color = 'blue';
div.insertBefore(txt, dv[i+1]); //добавляем текст перед след. элементом
i += 3;
}
</script>

В цикле не выводит почему-то. только в конец всех блоков.

Edited February 7, 2013 by SFproG

[Great Rash]

Вы используете одну и ту же ноду. и в цикле просто перемещаете её. Из-за этого она оказывается в самом конце при выходе из цикла. Вам же нужно несколько разных нод, т.е. вот так.

[SFproG]

Great Rash, спасибо, помог разобраться.

Только это мне не совсем помогло))

У меня задача была такая:

<style type="text/css">
.dv {width:300px; height:30px; border:solid 1px; margin:5px;}
</style>
<ul>
<li id="li">
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
</ul>

<script type="text/javascript">
var d = document.getElementsByClassName('dv');
var li = document.getElementById('li');
var dv = document.getElementsByClassName('dv');
var s = d.length;
var i = 2;
while (i <= s) {
var txt = document.createTextNode('</li><li>');
dv[i].style.color = 'blue';
li.insertBefore(txt, dv[i+1]); //добавляем перед след. элементом
i += 3;
}
</script>

Дивы, которые формируются динамически, нужно разбить по три штуки в списки. Типа, так:

<ul>
<li id="li">
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
<li>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
<li>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
<li>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
</ul>

"createTextNode" не выводит теги как надо, в виде текста простого вставляет. "createElement" тоже не подходит.

Подскажите, как правильно решить эту задачу. Вставить "</li><li>" в нужное место.