Reputation: 595
I'm trying to use the following code to append 40 new div elements to a #colors div:
$( document ).ready(function() {
var $node = $("<div></div>");
var $divg = $('#colors');
for (var i = 1; i <= 40; i++) {
$divg.append($node);
}
});
At the end I get the following:
<div id="colors">
<div></div>
</div>
Could someone please tell me what's happening?
I can't figure out.
Upvotes: 0
Views: 2518
Reputation: 44118
I used plain JavaScript (I wrapped it in a $(function(){})
, because I was going to write jQuery initially.)because (at least for me) it's easier to read the code (plus I suck at jQuery too many options makes my mind lazy.)
Although cloning is the common way to accomplish your goal, there are other ways to iterate through the creation of elements such as createElement()
and appendChild();
$(function() {
for (var i = 0; i < 40; i++) {
var shade = document.getElementById('colors');
var x = document.createElement('div');
x.classList.add('x');
shade.appendChild(x);
}
});
#colors {
border: 3px inset black;
min-height: 30px;
max-width: 300px;
display: table;
}
.x {
border: 1px solid red;
min-width: 30px;
border-radius: 50%;
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="colors">
<div></div>
</div>
Upvotes: 2
Reputation: 15875
I cannot explain it better that T.J's explanation. Use the clone()
function to create a new div
.
$( document ).ready(function() {
var $divg = $('#colors');
var $node = $("<div></div>");
for (var i = 1; i <= 40; i++) {
$divg.append($node.clone());
}
});
#colors div{
border : 1px solid red;
width : 50px;
height : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors">
<div></div>
</div>
Upvotes: 2
Reputation: 1075925
When you do var $node = $("<div></div>");
you're creating a jQuery object with a newly-created div
inside it which isn't in the DOM yet. The first time you append it, you put it in the DOM. The second time you append it, you move it. (Well, you would if you were appending it to something else, but actually you're just putting it in the same place.)
If you want multiple divs, you need to create more than one. clone
does that, but in that code, you could just do it directly.
Append is perfectly happy with markup:
$( document ).ready(function() {
var $divg = $('#colors');
for (var i = 1; i <= 40; i++) {
$divg.append("<div></div>");
}
});
Or if it's important to create the element first because you're doing things with it:
$( document ).ready(function() {
var $node;
var $divg = $('#colors');
for (var i = 1; i <= 40; i++) {
$node = $("<div></div>");
$divg.append($node);
}
});
Or using clone
, but in this case I probably wouldn't:
$( document ).ready(function() {
var $node = $("<div></div>");
var $divg = $('#colors');
for (var i = 1; i <= 40; i++) {
$divg.append($node.clone());
}
});
(Note that technically, that creates an extra div
, but it's fine, that isn't expensive and it doesn't get added to the DOM anywhere.)
Upvotes: 2
Reputation: 19247
move var $ node = .. .into the loop:
$( document ).ready(function() {
var $divg = $('#colors');
for (var i = 1; i <= 40; i++) {
var $node = $("<div></div>");
$divg.append($node);
}
});
or even:
$divg.append("<div></div>");
Upvotes: 1