Вход

Просмотр полной версии : Как вставить теги в нужное место?

SFproG
08.02.2013, 07:45
Есть код:

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

<ul>
<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>

Нужно через каждые три дива, которые формируются динамически, добавить теги "</li><li>".
Пытаюсь сделать так:

<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>


var s = document.getElementsByClassName('dv').length;
var li = document.getElementById('li');
var dv = document.getElementsByClassName('dv');
var i = 3;

while (i <= s) {
var txt = document.createTextNode('</li><li>');
li.insertBefore(txt, dv[i]); //добавляем перед след. элементом
i += 3;
}

"createTextNode" не хочет выводить теги в виде тегов, только текстом выводит. Подскажите как правильно вставить теги, чтобы получилось так:

<ul>
<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><li>
<div class="dv">111</div>
</li>
</ul>
danik.js
08.02.2013, 07:51
Странная задача. Вы не ищите легких путей? Почему сразу не выводить div-ы как положено, оборачивая в <li> ?
SFproG
08.02.2013, 08:02
Они выводятся динамически. Их может быть 5, а может быть 20. Нужно автоматизировать растановку "</li><li>"
ksa
08.02.2013, 08:28
Нужно автоматизировать растановку "</li><li>"
Нужно не это вставлять... :)
Нужно делать список, а в каждый элемент кидать по 3, уже существующих, дива.
danik.js
08.02.2013, 08:41
Понятно что выводятся динамически. Нельзя завести счетчик и подсчитывать их, вставляя где нужно открывающй </li> ?
ksa
08.02.2013, 08:46
завести счетчик и подсчитывать их, вставляя где нужно открывающй </li> ?
Этот вариант ошибочен...

Как вариант.

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
li {
border:solid 1px;
}
li+li {
margin-top: 5px;
}
.dv {
width:300px;
height:30px;
border:solid 1px;
margin:5px;
}
</style>
<script type="text/javascript">
function test() {
var o=document.getElementById('li');
var ou=o.parentNode;
o=o.getElementsByTagName('div');
var i=0,ol;
while (o[3]) {
if (i%3==0) {
ol=document.createElement('li');
ou.appendChild(ol);
};
ol.appendChild(o[3]);
i++;
};
};
</script>
</head>
<body>
<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>
<button onclick='test()'>Go</button>
</body>
</html>
рони
08.02.2013, 09:03
SFproG,
<!DOCTYPE HTML>

<html>

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

<body>
<ul>
<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 ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li')[0];
var fr = document.createDocumentFragment()
var n = 0;
while (li.children.length>3) {
n %=3;
if (n==0) {var li_new = document.createElement('li');
fr.appendChild(li_new)
}
li_new.appendChild(li.children[3]);
n++
}
ul.appendChild(fr)
</script>
</body>
</html>
vadim5june
08.02.2013, 09:13
Нужно через каждые три дива, которые формируются динамически, добавить теги "</li><li>".
В DOM теги вставлять нельзя только элементы
Можно сразу формировать список

<script>
function cr(){
var nd=20;//число дивов
var ul=document.createElement('ul');
for(var i=0;i<nd;i+=3)
{
var li=document.createElement('li');
for(var y=0;y<3;y++)
{if(i+y==nd)break;
var d=document.createElement('div');
var txt = document.createTextNode('trat'+i+''+y);
d.appendChild(txt);
li.appendChild(d);
};
ul.appendChild(li);
};
document.body.appendChild(ul);
alert(document.body.innerHTML);
}
</script>
<body>
<button onclick=cr()>create</button>
danik.js
08.02.2013, 09:17
Этот вариант ошибочен...
А вариант генерировать код не тот что нужен, а потом поправлять его через javascript - не ошибочен? Да уж..

Почему б тогда не генерировать весь код сразу на стороне клиента?
ksa
08.02.2013, 09:30
Почему б тогда не генерировать весь код сразу на стороне клиента?
Это уже к автору. :D
Может он не в сосотоянии повлиять на генерацию контента...
SFproG
08.02.2013, 11:25
Всем спасибо. Способ рони испытываю.
На генерацию контента я не в состоянии повлиять пока)