How can I insert existing elements into a dynamically created element using JavaScript?

by

You cannot inject any markup via CSS.
CSS is a stylesheet language, used to style documents written in HTML

However, you can create a new div element, append it to your page, then insert the existing div elements into it using JavaScript.

Here’s how:

var div = document.createElement('div'),
    divs = document.querySelectorAll('div'),
    len = divs.length,
    i;

// Set any necessary attributes
div.id = "myDiv";

for(i = 0; i < len; i++) {
  div.appendChild(divs[i]);
}

document.body.appendChild(div);

This will result in the desired markup:

<div id="myDiv">
  <div class="div 1">div 1</div>
  <div class="div 2">div 2</div>
  <div class="div 3">div 3</div>
  <div class="div 4">div 4</div>
  <div class="div 5">div 5</div>
</div>

Please note that document.querySelectorAll('div') selects any divs on the page. You will need to make this more specific to your case, e.g. document.querySelectorAll('div.myClass')

More Related Contents:

  1. Should the Bootstrap media queries be saved in a css file or a js file?
  2. Include another HTML file in a HTML file
  3. Why does my http://localhost CORS origin not work?
  4. Make header and footer files to be included in multiple html pages
  5. How can I check whether Google Maps is fully loaded?
  6. How can I get the values of data attributes in JavaScript code?
  7. After submitting a POST form open a new window showing the result
  8. Disabled href tag
  9. HTML input file selection event not firing upon selecting the same file
  10. execute function after complete page load [duplicate]
  11. Best way to obfuscate an e-mail address on a website?
  12. How to get the HTML for a DOM element in javascript
  13. HTML5 Drag and Drop anywhere on the screen
  14. HTML5 / Javascript – DataURL to Blob & Blob to DataURL
  15. How to build simple tabs with jQuery?
  16. How can I make reCAPTCHA a required field?
  17. HTML5 canvas drawImage with at an angle
  18. Can you use HTML5 local storage to store a file? If not, how?
  19. React.js this.props.data.map() is not a function
  20. How to store a byte array in Javascript
  21. How to scale an imageData in HTML canvas?
  22. HTML5 Audio can’t play through Javascript unless triggered manually once
  23. How can I get all a form’s values that would be submitted without submitting [duplicate]
  24. Add CSS to with JavaScript?
  25. how to set content-disposition = attachment via javascript?
  26. Changing “src” attribute of
  27. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  28. How to get element by class name
  29. Split text into pages and present separately (HTML5)
  30. HTML5: Detecting if you’re on mobile or pc with javascript? [duplicate]

Leave a Comment