How to dynamically create a new div, change it, move, change in any way possible in JavaScript?

Question

I want to create new div elements when the page loads. These elements are displayed as an ordered group, which changes depending on the external data from the JSON file. I need to do this with a for loop because more than 100 divs are required.

So, I need to be able to modify each div created in terms of height, width, top / left corner and so on. However, document.getElementById("created_div").style.whatever it is, I don’t even see any new div appear. I set the new divs height / width to 500px, background to "red" and so on, but no new divs definitely appear.

What am I doing wrong?

Answer 1

• Create var div = document.createElement('div');
• Adding document.body.appendChild(div);
• Style management
  • Positioning div.style.left = '32px'; div.style.top = '-16px';
  • Classes div.className = 'ui-modal';
• Modification
  • ID div.id = 'test';
  • content (using HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • contents (using text) div.textContent = 'Hello world.';
• Removing div.parentNode.removeChild(div);
• Access
  • by identifier div = document.getElementById('test');
  • by tags array = document.getElementsByTagName('div');
  • by class array = document.getElementsByClassName('ui-modal');
  • using the CSS selector (single) div = document.querySelector('div #test .ui-modal');
  • using the CSS (multi) selector array = document.querySelectorAll('div');
• Relations (including text nodes)
  • children node = div.childNodes[i];
  • sibling node = div.nextSibling;
• Relations (HTML elements only)
  • children element = div.children[i];
  • sibling element = div.nextElementSibling;

This covers the basics of DOM manipulation. Remember that adding an element to a body or a node containing a body requires the newly created node to be visible inside the document.

Answer 2

Have you tried jQuery ? Vanilla javascript can be tough. Try using this:

 $('.container-element').add('<div>Insert Div Content</div>'); 

.container-element is a JQuery selector that labels an element with the class "container-element" (presumably the parent element into which you want to insert your divs). The add() function then inserts the HTML into the container element.

Answer 3

in the above div.classNmae = 'col-md-6'; does not work. I already added