javascript - יצירה של <div> והוספה של <div> באופן דינמי

אני מנסה ליצור <div> בצורה דינמית, עם <div> נוסף שמתווסף בתוכה. עד כה יש לי את זה וזה עובד:

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

אני פשוט נתקל בבעיה ביצירת והוספת ה-div השני ל-div הראשון.

בעצם אני רוצה לעשות את זה כסימון הסופי:

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

תשובה #1

השתמש באותו התהליך. כבר יש לך את המשתנה iDiv שמצביע עדיין על האלמנט המקורי <div id='block'> שיצרת. אתה רק צריך ליצור <div> נוסף ולהפעיל את 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/

סדר יצירת האירועים לא חייב להיות כפי שצויין למעלה. אתה יכול גם להוסיף את ה-innerDiv החדש ל-div החיצוני לפני שאתה מוסיף את שניהם ל-<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);

תשובה #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);