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

Question

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

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

我究竟做错了什么？

Answer 1

• 创建 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选择器(单个) div = document.querySelector('div #test .ui-modal');
  • 通过CSS选择器(多) array = document.querySelectorAll('div');
• 关系(包括文本节点)
  • 孩子 node = div.childNodes[i];
  • 兄弟 node = div.nextSibling;
• 关系(仅限HTML元素)
  • 孩子 element = div.children[i];
  • 兄弟 element = div.nextElementSibling;

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