How to create new div dynamically, change it, move it, modify it in every way possible, in JavaScript?

Question

I want to create new divs as the page loads. These divs will appear as an ordered group which changes depending upon external data from a JSON file. I will need to do this with a for loop because there are over 100 divs needed.

So, I need to be able to change each created div in regards to height, width, top/left and so on. Yet, document.getElementById("created_div").style.whatever does nothing, I can't even see a single new div appear. I've set the new divs height/width to 500px, background to "red", and so on, but no new divs are definitely appearing.

What am I doing wrong?

If you're doing this in a loop, does that mean you're attempting to create 100 divs with the same identifier? — Evan Trimboli, Dec 30 '12 at 21:14
look in browser console...any errors? Even though ID should not be repeated...shouldn't stop it being inserted if selector exists and no errors thrown.Errors are first critical check — charlietfl, Dec 30 '12 at 21:14
Not even trying a loop yet so I'm just using a single ID. No browser errors. How to insert into DOM? — Erik Nelson, Dec 30 '12 at 21:18
your code doesn't create any div. I suggest you use the javascript framework jQuery, and do as Erik Nelson suggested (the new divs will be created inside the element with the id "box0"). — Robin Manoli, Dec 30 '12 at 21:22
depending on your json data, you may also want to try another javascript library than jQuery, called d3js — Robin Manoli, Dec 30 '12 at 21:24

Ryan Stein · Accepted Answer · 2012-12-31T15:59:10.607

Creation var div = document.createElement('div');
Addition document.body.appendChild(div);
Style manipulation
- Positioning div.style.left = '32px'; div.style.top = '-16px';
- Classes div.className = 'ui-modal';
Modification
- ID div.id = 'test';
- contents (using HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
- contents (using text) div.textContent = 'Hello world.';
Removal div.parentNode.removeChild(div);
Accessing
- by ID div = document.getElementById('test');
- by tags array = document.getElementsByTagName('div');
- by class array = document.getElementsByClassName('ui-modal');
- by CSS selector (single) div = document.querySelector('div #test .ui-modal');
- by CSS selector (multi) array = document.querySelectorAll('div');
Relations (text nodes included)
- 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, element addition to the body or a body-contained node is required for the newly created node to be visible within the document.

score -2 · Answer 2 · answered Dec 30 '12 at 21:21

-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 marks the element with the class "container-element" (presumably the parent element in which you want to insert your divs). Then the add() function inserts HTML into the container-element.

answered Dec 30 '12 at 21:21

Brad Ross

451
8
26

Well, I got it. I had to set padding to greater than 0. Even though its height and width are set to 64 each. Bleh. Is there any way for a child div to act like a normal div? The goal is to get each div to act like a link. Trying to create a dynamic list for a game website ;/ – Erik Nelson Dec 30 '12 at 21:24
1

I don't agree with this, innerHTML (what jquery uses for that) is *NOT* standard, and the price of not following the standard may lead to missbehaviour. Also, for me, it do not make any sense to add a plan html string into a DOM tree rather than to add node elements. – StormByte Oct 31 '13 at 13:42
3

Considering that the entire DOM tree starts out life as plain old HTML, and that innerHTML is just that - the HTML that an element has in it, having a problem with either is on par with saying you shouldn't use the DOM because it polluted the plain old HTML. – Rodney P. Barbati May 08 '14 at 04:56

How to create new div dynamically, change it, move it, modify it in every way possible, in JavaScript?

2 Answers2

Linked