loop javascript with css content

Question

i need in my code to repeat ten times this content, then i think that is possible in a loop like a for or while, but i tried and i can't

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

any help?

thanks

Nikola K. · Accepted Answer · 2012-07-21 22:56:57Z

5

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

edited Jul 21, 2012 at 22:56

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Mar 31, 2011 at 15:16

Vasily

1645 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Naftali Over a year ago

why do u need jquery for something so trivial?

Damb Over a year ago

I think its jsut because jQuery is used for everything nowadays.. simple or not, jQuery makes it easy :)

Vasily Over a year ago

Our whole life is a collection of trivial pieces. Feel free to use it that makes life easier

Damb Over a year ago

Is the answer really that simple? Is saving 3 lines always better than linking to several kilobytes of JavaScript library? (=another request) :)

user455318 Over a year ago

the problem is not the library, i use the jquery in my project. the code is perfect. Thanks

|

Mark Coleman · Accepted Answer · 2011-03-31 15:29:29Z

2

Since the jQuery was not specified in the inital question I am going to assume it is not being used.

The pure JavaScript way would be like so:

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

Code example on jsfiddle.

answered Mar 31, 2011 at 15:29

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Comments

Nikola K. · Accepted Answer · 2012-07-21 22:57:05Z

0

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>');
}

edited Jul 21, 2012 at 22:57

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Mar 31, 2011 at 15:18

Damb

14.7k6 gold badges50 silver badges49 bronze badges

2 Comments

Damb Over a year ago

You can use really basic and pure JavaScript approach like this if you don't rely on JavaScript too much.

Damb Over a year ago

There are already posted better ways to do it. Mine was just the most basic one :)

Collectives™ on Stack Overflow

loop javascript with css content

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related