Is there any solution to build multiple divs with in div in PURE JavaScript ?
jQuery version
for (var i = 1; i <= 3; i++) {
$('#maindiv').append('<div id="page' + i + '">new divs</ div>')
}
Add a comment
|
8 Answers
This does the same as your original jQuery snippet, in that it adds divs to the end of, and inside your original div.
mainDiv = document.getElementById( 'maindiv' );
for (var i = 1; i <= 3; i++) {
mainDiv.innerHTML += '<div id="page' + i + '">new divs</ div>';
}
Fiddle: http://jsfiddle.net/Q6Lnw/197/
4 Comments
Maciej Sz
Wouldn't it be better to use the
+= operator for appending innerHTML attribute?
Rob Baillie
This is adding an id (I assume you mean that, and not a name, which is something else). They're the same as the ones you created page1, page2, page3.
Rob Baillie
@MaciejSz That's fair enough. Though probably not a big deal - updated.
Maciej Sz
@RobBaillie: probably not, but I like to keep the code as clean as possible.
To append div's (not text) use this:
var pageLimit=30;
var parentDiv = document.getElementById('test');
for (var i = 1; i < pageLimit; i++ ) {
var newDiv = document.createElement('div');
newDiv.innerHTML = 'Testing';
parentDiv.appendChild(newDiv);
}
Comments
try:
var newHtml = "";
for (var i = 1; i <= 3; i++) {
newHtml += '<div id="page' + i + '">new divs</ div>';
}
document.getElementById("maindiv").innerHTML = newHtml;
byee
7 Comments
rjmunro
Building the whole string first is more efficient +1
Frogmouth
thx, I build the string because is the only way to use += ;)
Maciej Sz
Operating on strings is always less efficient (not to mention unclean and inflexible) then using the OO interface.
Frogmouth
really? thx... however bboymaanu has used string then i use it myself. However thx
Maciej Sz
Yea, it's common for young developers. When they learn about the world of strings they just stop there. It is true, that many tasks can be done with them, but honestly - why the great minds that come up with OO would even bother if it was the ultimate solution? For me it is just like being stuck on 2nd gear.
|
This should do it:
var div = document.getElementById('maindiv');
for (var i = 1; i <= 3; i++) {
div.innerHTML += '<div id="page' + i + '">new divs</ div>';
}
Comments
I think this is what you want:
http://jsfiddle.net/Q6Lnw/195/
var div = document.getElementById('test');
div.innerHTML = div.innerHTML + '<div></div>';
3 Comments
Mo.
Thank you very much for your help. Looking solution with pure
JavaScript without using jQuery
Rory McCrossan
@Zword notice that the fiddle is inserting text, yet the OPs question wants to insert
div elements.
Zword
@RoryMcCrossan its just simple.Replace text with the div code
use this:
for (var i = 1; i <= 3; i++){
document.getElementById("h-related").innerHTML ='new divs' }
Comments
I think you should be using document fragments.
var maindiv = document.getElementById('maindiv');
var docfrag = document.createDocumentFragment();
for (var i = 1; i <= 3; i++ ) {
var newdiv = document.createElement('div');
newdiv.id = 'page' + i;
docfrag.appendChild(newdiv);
}
maindiv.appendChild(docfrag)
Comments
var div = document.getElementById('divId');
for (var i = 1; i < 10; i++ )
{
var newDiv = document.createElement('div');
newDiv.innerHTML = 'My new div';
div.appendChild(newDiv);
}
appendChild Add a div to the end of the list of children of a specified parent div.
