Javascript：如何dynamic创build新的div，改变它，移动它，以各种方式修改它？

我一直在挣扎几个小时，我疯了。 我想在页面加载时创build新的div。 这些div将显示为一个有序的组，它根据来自JSON文件的外部数据而变化。 我将需要做一个for循环，因为有超过100个div需要。

所以，我需要能够改变每个创build的高度，宽度，顶部/左侧等。 然而， document.getElementById("created_div").style.whatever什么都不做，我什至不能看到一个新的div出现。 我已经设置新的divs的高度/宽度为500px，背景为“红色”等，但没有新的div肯定出现。 我究竟做错了什么？ 为什么这么难？ 啧。 帮帮我！

Answer 1

• Creation var div = document.createElement('div');
• 另外 document.body.appendChild(div);
• 样式操作
  • 定位div.style.left = '32px'; div.style.top = '-16px';
  • 类 div.className = 'ui-modal';
• 修改
  • ID div.id = 'test';
  • 内容（使用HTML） div.innerHTML = '<span class="msg">Hello world.</span>';
  • 内容（使用文字） div.textContent = 'Hello world.';
• 去除 div.parentNode.removeChild(div);
• 访问
  • 由ID div = document.getElementById('test');
  • 通过标签 array = document.getElementsByTagName('div');
  • 通过类 array = document.getElementsByClassName('ui-modal');
  • 通过CSS selector（single） div = document.querySelector('div #test .ui-modal');
  • 通过CSS selector（多） array = document.querySelectorAll('div');
• 关系（包含文本节点）
  • children node = div.childNodes[i];
  • 兄弟 node = div.nextSibling;
• 关系（仅限HTML元素）
  • children element = div.children[i];
  • 兄弟 element = div.nextElementSibling;

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

Answer 2

你有没有试过JQuery ？ 香草JavaScript可以是艰难的。 尝试使用这个：

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

.container-element是一个JQueryselect器，用class“container-element”（大概是你要插入div的父元素）标记该元素。 然后add()函数将HTML插入到容器元素中。