javascript - Luo <div> ja lisää <div> dynaamisesti

Yritän luoda dynaamisesti <div>-elementin, jonka sisään lisätään toinen <div>. Minulla on tähän mennessä tämä, mikä toimii:

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

Minulla on vain vaikeuksia luoda ja liittää toinen div ensimmäiseen diviin.

Haluan käytännössä tehdä tämän lopullisena merkintänä:

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

Vastaus #1

Käytä samaa prosessia. Sinulla on jo muuttuja iDiv, joka viittaa edelleen alkuperäiseen elementtiin <div id='block'>, jonka olet luonut. Sinun tarvitsee vain luoda toinen <div> ja kutsua 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/

Tapahtumien luomisjärjestyksen ei tarvitse olla kuten yllä olen esittänyt. Voit myös vaihtoehtoisesti lisätä uuden innerDiv-elementin ulompaan diviin ennen kuin lisäät molemmat <body>:hen.

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

Vastaus #2

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