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

时间:2012-12-30 21:11:23

标签: javascript dom

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

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

我做错了什么?

2 个答案:

答案 0 :(得分:400)

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

答案 1 :(得分:0)

你试过JQuery吗?香草javascript可能很难。试试这个:

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

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