Create and append dynamically

by

Use the same process. You already have the variable iDiv which still refers to the original element <div id='block'> you’ve created. You just need to create another <div> and call 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/

The order of event creation doesn’t have to be as I have it above. You can alternately append the new innerDiv to the outer div before you add both to the <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);

More Related Contents:

  1. PLEASE assist me.. RE: *FORM FIELDS* I want to Hide() my "type=text box" until the Other option is chosen in the dropdown option
  2. How can I force clients to refresh JavaScript files?
  3. How to offset the center point in Google maps api V3
  4. What is “function*” in JavaScript?
  5. Semicolon before self-invoking function? [duplicate]
  6. Firefox ‘Cross-Origin Request Blocked’ despite headers [closed]
  7. How to pass parameters to a Script tag?
  8. Flask – Calling python function on button OnClick event
  9. Hide div after a few seconds
  10. Using jQuery how to get click coordinates on the target element
  11. Understanding async/await on NodeJS
  12. Check if object member exists in nested object
  13. How to prevent page from reloading after form submit – JQuery
  14. Adding images to an HTML document with JavaScript
  15. How does the way in which a JavaScript event handler is assigned affect its execution?
  16. Sorting on a custom order
  17. Jquery Ajax prevent fail in a deferred sequential loop
  18. Google Sheets add-on: Set anonymous/dynamic functions to Menu using Google App Script
  19. prevent mobile default keyboard when focusing an from showing
  20. save html output of page after execution of the page’s javascript
  21. In Firebase when using push() How do I get the unique ID and store in my database [duplicate]
  22. Jquery: how to sleep or delay?
  23. How to Select Element That Does Not have Specific Class
  24. When do I need to use hasOwnProperty()?
  25. Calculate Position of selected text javascript/JQuery?
  26. jQuery 3 slim ajax basic example
  27. Iterate over object keys in node.js
  28. How can I read a local file with Papa Parse?
  29. convert HTML ( having Javascript ) to PDF using JavaScript [closed]
  30. How to disable an input type=text?

Leave a Comment