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

admin管理员组

文章数量:1134083

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?

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?

• javascript
• dom

Share Improve this question Follow edited Apr 2, 2018 at 12:10 halfer 20.4k1919 gold badges108108 silver badges201201 bronze badges asked Dec 30, 2012 at 21:11 Erik NelsonErik Nelson 1,01933 gold badges1212 silver badges1313 bronze badges 8

• 2 Share the code you use to create divs – wakooka Commented Dec 30, 2012 at 21:13
• 1 $("#box0").append('<div id="created_div"></div>'); – Erik Nelson Commented Dec 30, 2012 at 21:13
• If you're doing this in a loop, does that mean you're attempting to create 100 divs with the same identifier? – 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 Commented Dec 30, 2012 at 21:14
• besides creating them, do you insert them in the DOM ? – Gabriele Petrioli Commented Dec 30, 2012 at 21:17

 |  Show 3 more comments

2 Answers 2

Sorted by: Reset to default 446

• 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.

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.

本文标签：