如何在JavaScript中动态创建新div，更改它，移动它，以各种可能的方式修改它？

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.

我想在页面加载时创建新的div。这些div将显示为一个有序组，它根据JSON文件中的外部数据而变化。我需要使用for循环执行此操作，因为需要超过100个div。

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.

所以，我需要能够在高度，宽度，顶部/左侧等方面更改每个创建的div。然而，document.getElementById（“created_div”）。style.whatever什么都没做，我甚至看不到一个新的div出现。我将新div的高度/宽度设置为500px，背景设置为“红色”，依此类推，但没有新的div显然出现。

What am I doing wrong?

我究竟做错了什么？

2 个解决方案

#1

• Creation var div = document.createElement('div');
• Creation var div = document.createElement（'div'）;
• Addition document.body.appendChild(div);
• Addition document.body.appendChild（div）;
• Style manipulation
  • Positioning div.style.left = '32px'; div.style.top = '-16px';
  • 定位div.style.left = '32px'; div.style.top =' - 16px';
  • Classes div.className = 'ui-modal';
  • 类div.className ='ui-modal';
• 样式操作定位div.style.left ='32px'; div.style.top =' - 16px';类div.className ='ui-modal';
• Modification
  • ID div.id = 'test';
  • ID div.id ='test';
  • contents (using HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • 内容（使用HTML）div.innerHTML =' Hello world。 ';
  • contents (using text) div.textContent = 'Hello world.';
  • 内容（使用文本）div.textContent ='Hello world。';
• 修改ID div.id ='test';内容（使用HTML）div.innerHTML =' Hello world。 ';内容（使用文本）div.textContent ='Hello world。';
• Removal div.parentNode.removeChild(div);
• 删除div.parentNode.removeChild（div）;
• Accessing
  • by ID div = document.getElementById('test');
  • 通过ID div = document.getElementById（'test'）;
  • by tags array = document.getElementsByTagName('div');
  • by tags array = document.getElementsByTagName（'div'）;
  • by class array = document.getElementsByClassName('ui-modal');
  • by class array = document.getElementsByClassName（'ui-modal'）;
  • by CSS selector (single) div = document.querySelector('div #test .ui-modal');
  • 通过CSS选择器（单个）div = document.querySelector（'div #test .ui-modal'）;
  • by CSS selector (multi) array = document.querySelectorAll('div');
  • by CSS selector（multi）array = document.querySelectorAll（'div'）;
• 通过ID div = document.getElementById（'test'）访问; by tags array = document.getElementsByTagName（'div'）; by class array = document.getElementsByClassName（'ui-modal'）;通过CSS选择器（单个）div = document.querySelector（'div #test .ui-modal'）; by CSS selector（multi）array = document.querySelectorAll（'div'）;
• Relations (text nodes included)
  • children node = div.childNodes[i];
  • children node = div.childNodes [i];
  • sibling node = div.nextSibling;
  • 兄弟节点= div.nextSibling;
• 关系（包括文本节点）children node = div.childNodes [i];兄弟节点= div.nextSibling;
• Relations (HTML elements only)
  • children element = div.children[i];
  • children element = div.children [i];
  • sibling element = div.nextElementSibling;
  • 兄弟元素= div.nextElementSibling;
• 关系（仅限HTML元素）children元素= div.children [i];兄弟元素= 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.

这涵盖了DOM操作的基础知识。请记住，新创建的节点在文档中可见，需要向主体或包含主体的节点添加元素。

#2

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

你试过JQuery吗？香草javascript可能很难。试试这个：

$('.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.

.container-element是一个JQuery选择器，它使用类“container-element”标记元素（可能是您要在其中插入div的父元素）。然后add（）函数将HTML插入container-element。