从javascript数组向html页面添加新元素_Javascript_Html_Css_Arrays

从javascript数组向html页面添加新元素

javascript html css arrays

从javascript数组向html页面添加新元素,javascript,html,css,arrays,Javascript,Html,Css,Arrays,我试图创建一个数组来保存元素样式。当用户单击按钮时，数组中的新元素应该可见。这就是我目前所拥有的。该按钮将添加一个彩色Div。但我正在尝试用数组扩展它下面是我的javascript： function addObj() { var newObj = document.createElement('div'); newObj.style.position = "absolute"; newObj.style.height = "60px"; newObj.st

我试图创建一个数组来保存元素样式。当用户单击按钮时，数组中的新元素应该可见。这就是我目前所拥有的。该按钮将添加一个彩色Div。但我正在尝试用数组扩展它

下面是我的javascript：

function addObj()
{
    var newObj = document.createElement('div');

    newObj.style.position = "absolute";
    newObj.style.height = "60px";
    newObj.style.width = "60px";
    newObj.style.top = "60px";
    newObj.style.left = "60px";
    newObj.style.backgroundColor = "blue";


var docBody = document.getElementsByTagName("body").item(0);

var newElement = document.getElementsByTagName("div").item(0);

var items = new Array();
    items[0] = new Array(100,200,'#FF0000');
    items[1] = new Array(300,400,'#0FFFCC');
    items[2] = new Array(400,500,'#FFFFCC');
    items[3] = new Array(600,200,'#3FFFCC');
    items[4] = new Array(600,200,'#F3FFCC');


for (var i = 0; i > items.length; i++){
    addObj(items[i] [0], items[i] [1]);
//  addObjects(items[i] [0], items[i] [1]);

}

 docBody.appendChild(newObj);

function newObj(leftPos, topPos, color){

    var newObj = addObj(items[i] [0], items[i] [1]);


}

    }

这是我的html：

    <body>
    <button onClick="addObj()">
    Add Object
    </button>




    </body>


添加对象

单击添加下一项

var count = 0;  
var items = [
    [100, 200, '#FF0000'],
    [300, 400, '#0FFFCC'],
    [400, 500, '#FFFFCC'],
    [600, 200, '#3FFFCC'],
    [600, 200, '#F3FFCC']
];

function addObj() {
    var target = items[count++];
    if (!target)
        return;

    var newObj = document.createElement('div');

    newObj.style.position = "absolute";
    newObj.style.height = "60px";
    newObj.style.width = "60px";
    newObj.style.left = target[0] + "px";    
    newObj.style.top = target[1] + "px";
    newObj.style.backgroundColor = target[2];

    document.getElementsByTagName("body").item(0).appendChild(newObj);
}

我对代码进行了一点重构，我没有功能，但它的渲染div控件带有颜色。
我建议您使用jquery，它将帮助您大量抽象代码。
下面是java脚本代码
函数addObj（）
{
var items=新数组（）；
项[0]=新数组（100200，#FF0000'）；
项目[1]=新阵列（100400，#0FFFCC'）；
项目[2]=新阵列（100600，#FFFFCC'）；
项目[3]=新阵列（100800，#3FFFCC'）；
项目[4]=新阵列（1001000，#F3FFCC'）；
对于（变量i=0；i

为什么不创建css类，然后从元素的

类列表中添加/删除该类呢。但是我注意到代码中有一个递归循环addObj在for循环中从自身内部调用。
I have refactored code little bit, I donnt functionality but its rendering div control with color.

I suggest you to use jquery which will help you to abstract code a lot.

here is the java script code

function addObj()
{
    var items = new Array();
    items[0] = new Array(100,200,'#FF0000');
    items[1] = new Array(100,400,'#0FFFCC');
    items[2] = new Array(100,600,'#FFFFCC');
    items[3] = new Array(100,800,'#3FFFCC');
    items[4] = new Array(100,1000,'#F3FFCC');


    for (var i = 0; i < items.length; i++){
        newObj(items[i] [0], items[i] [1], items[i] [2]);
    }        
} 
function newObj(leftPos, topPos, color)
{
    var docBody = document.getElementById("elements");
    var newObj = document.createElement('div');

    newObj.style.position = "absolute";
    newObj.style.height = "60px";
    newObj.style.width = "60px";
    newObj.style.top = topPos;
    newObj.style.left = leftPos;
    newObj.style.backgroundColor = color;

    docBody.appendChild(newObj);
}

Here is your HTML code
<body>
  <div id="elements">
<button onClick="addObj()">Add Object</button>
</div>  
</body>