Buat <div> dan tambahkan <div> secara dinamis

128

Saya mencoba membuat secara <div>dinamis, dengan menambahkan <div>di dalamnya. Sejauh ini saya punya yang berfungsi:

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

Saya hanya mengalami kesulitan membuat dan menambahkan div kedua ke div pertama.

Saya pada dasarnya ingin melakukan ini sebagai markup terakhir:

<div id="block" class="block">
   <div class="block-2"></div>
</div>

javascript

— Michael Berkowski
sumber

19

Itu cara yang aneh untuk mendapatkan elemen tubuh ... gunakan saja document.body.

— Guffa

234

Gunakan proses yang sama. Anda sudah memiliki variabel iDivyang masih merujuk ke elemen asli yang <div id='block'>Anda buat. Anda hanya perlu membuat yang lain <div>dan menelepon appendChild().

// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

http://jsfiddle.net/W4Sup/1/

Urutan pembuatan acara tidak harus seperti yang saya miliki di atas. Anda dapat secara bergantian menambahkan yang baru innerDivke div luar sebelum Anda menambahkan keduanya ke <body>.

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

// Create the inner div before appending to the body
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

// Then append the whole thing onto the body
document.getElementsByTagName('body')[0].appendChild(iDiv);

— Michael Berkowski
sumber

3

Melangkah lebih jauh adalah moral cerita :-)!

juga dapat mempersingkat baris terakhir dengan: document.body.appendChild (iDiv);

— idan hav

8

var iDiv = document.createElement('div');

iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

var div2 = document.createElement('div');

div2.className = 'block-2';
iDiv.appendChild(div2);

— Moazzam Khan
sumber

Anda sudah cukup banyak menyalin Michael Berkowski

— Oliver Bayes-Shelton

3

Saya tidak berpikir saya bisa melakukan itu. Solusi sederhana biasanya memiliki varian rendah: D.

— Moazzam Khan

4

var iDiv = document.createElement('div'),
    jDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
jDiv.className = 'block-2';
iDiv.appendChild(jDiv);
document.getElementsByTagName('body')[0].appendChild(iDiv);

— austincheney
sumber

3

Yah, saya tidak tahu seberapa dinamis ini, tapi kadang-kadang ini bisa menyelamatkan kehidupan debug Anda:

var daString="<div id=\'block\' class=\'block\'><div class=\'block-2\'></div></div>";
var daParent=document.getElementById("the ID of whatever your parent is goes in here");
daParent.innerHTML=daString;

"Rat javascript" Jika saya melakukannya dengan benar. Bekerja untuk saya secara langsung ketika div dan isinya sendiri tidak dinamis, atau Anda bahkan dapat memanipulasi string untuk mengubahnya juga, meskipun memanipulasi string lebih kompleks daripada pendekatan "element.property = bla", ini memberikan beberapa sambutan yang sangat baik. fleksibilitas, dan juga alat debugging yang bagus :) Semoga membantu.

— Jorge Al Najjar
sumber

2

var i=0,length=2;

     for(i; i<=length;i++)
 {
  $('#footer-div'+[i]).append($('<div class="ui-footer ui-bar-b ui-footer-fixed slideup" data-theme="b" data-position="fixed" data-role="footer" role="contentinfo" ><h3 class="ui-title" role="heading" aria-level="1">Advertisement </h3></div>')); 

 }

— pengguna2563247
sumber

mungkin lebih baik untuk menunjukkan Anda menggunakan perpustakaan JavaScript dan bahwa contoh Anda menggunakan markup yang berbeda dari pertanyaan awal.

— merampok

2

window.onload = function() {
  var iDiv = document.createElement('div');
  iDiv.id = 'block';
  iDiv.className = 'block';
  document.body.appendChild(iDiv);

  var iiDiv = document.createElement('div');
  iiDiv.className = 'block-2';

  var s = document.getElementById('block');
  s.appendChild(iiDiv);
}

— Muhammad Talha Akbar
sumber

1

var arrayDiv = new Array();
    for(var i=0; i <= 1; i++){
        arrayDiv[i] = document.createElement('div');
        arrayDiv[i].id = 'block' + i;
        arrayDiv[i].className = 'block' + i;
    }
    document.body.appendChild(arrayDiv[0].appendChild(arrayDiv[1]));

— Yo Mismo
sumber

0

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

var iDiv2 = document.createElement('div');
iDiv2.className = "block-2";

iDiv.appendChild(iDiv2);
// Append to the document last so that the first append is more efficient.
document.body.appendChild(iDiv);

— Sekutu
sumber

0

    while(i<10){
               $('#Postsoutput').prepend('<div id="first'+i+'">'+i+'</div>');
               /* get the dynamic Div*/
               $('#first'+i).hide(1000);
               $('#first'+i).show(1000);
                i++;
                }

— Amine_Dev
sumber