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
– Evan Trimboli, Commented Dec 30, 2012 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
– charlietfl, Commented Dec 30, 2012 at 21:14

Ryan Stein · Accepted Answer · 2012-12-31 15:59:10Z

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.

Brad Ross · Accepted Answer · 2012-12-30 21:21:12Z

-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, 2012 at 21:21

Brad Ross

4618 silver badges26 bronze badges

3 Comments

Erik Nelson Over a year ago

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 ;/

StormByte Over a year ago

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.

Rodney P. Barbati Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related