如何在纯JavaScript中创建多个div（createElement）

Question

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

http://jsfiddle.net/Q6Lnw/2/

Answer 1

http://jsfiddle.net/5yYxU/

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

Answer 2

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/

Answer 3

try:

var newHtml = "";
for (var i = 1; i <= 3; i++) {
      newHtml += '<div id="page' + i + '">new divs</ div>';
 }
document.getElementById("maindiv").innerHTML = newHtml;

byee

Answer 4

I think this is what you want:

http://jsfiddle.net/Q6Lnw/195/

var div = document.getElementById('test');
div.innerHTML = div.innerHTML + '<div></div>';

Answer 5

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.

Answer 6

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

Answer 7

use this:

for (var i = 1; i <= 3; i++){

document.getElementById("h-related").innerHTML ='new divs' }

Answer 8

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)