Solved

jQuery: Insert 30 empty span tags

Posted on 2013-01-06
4
278 Views
Last Modified: 2013-01-24
Using jQuery, what is the best way to insert 30 empty span tags into a paragraph?  My code below works but I want to do it with less code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">
span {
display: block;
border: 1px solid red; margin: 5px; float: left; height: 5px; width: 5px; background: blue;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
 $('p').append('<span />')
});

</script>
</head>
<body>

<p></p>

</body>
</html>

Open in new window

0
Comment
Question by:hankknight
4 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 165 total points
ID: 38749217
$(document).ready(function() {
 for(var i=0;i<30;i++) $('p').append('<span />');
});
0
 
LVL 16

Author Comment

by:hankknight
ID: 38749235
How could I do that inline like this:

$('div').after( '<p class="slidesNav">'+  _30_SPAN_TAGS_HERE '+'</p>');

Open in new window

0
 
LVL 9

Assisted Solution

by:abolinhas
abolinhas earned 165 total points
ID: 38749448
Try this
<script>
$(document).ready(function() {

 for(var i=0;i<30;i++) $('#test').add('<p><span></span></p>').appendTo(document.body);

});
</script>
<div id="test"></div>

Open in new window

0
 
LVL 11

Accepted Solution

by:
mcnute earned 170 total points
ID: 38751859
I would use a combination of the two solutions:

$(document).ready(function() {
    $('div').after( '<p class="slidesNav"></p>');

     var spans;
     for(var i=0;i<30;i++) {
          spans += '<span></span>';
     }

$('.slidesNav').append(spans);
}); 
                                            

Open in new window


This is more performant than using the append method 30 times. By doing so you would use the append method only once with a text variable which contains 30 span tags.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question