цикл JavaScript с контентом CSS

Question

мне нужно в моем коде повторить это содержимое десять раз, тогда я думаю, что это возможно в цикле, например, for или while, но я попытался и не могу

<li>
    <img style="float: left;" src="img/gaja.jpg" alt="Angry face" />
    <div style="width: 100px; height: 20px; float:left; margin-left: 5px; font: bold 12px arial;">IceMan</div>
    <div style="width: 150px; height: 20px; float:left; margin-left:5px;">Web Designer / FullTime</div>
</li>

помочь

спасибо

Answer 1

var li = $('li');
for(var i = 0; i < 10; i++) {
    li.clone().appendTo(li.parent());
}

Answer 2

Поскольку jQuery не был указан в начальном вопросе, я предполагаю, что он не используется.

Чистый способ JavaScript будет выглядеть так:

var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li")[0];
for(var i=1;i<10;i++){
    ul.appendChild(li.cloneNode(true));
}

Пример кода на jsfiddle .

Answer 3

for (var i = 0; i < 10; i++)
{
    document.write('<li>');
    document.write('<img style="float: left;" src="img/gaja.jpg" alt="Angry face" />');
    document.write('<div style="width: 100px; height: 20px; float:left; margin-left: 5px; font: bold 12px arial;">IceMan</div>');
    document.write('<div style="width: 150px; height: 20px; float:left; margin-left:5px;">Web Designer / FullTime</div>');
    document.write('</li>');
}