JavaScript - 想知道如何添加html元素

时间:2014-02-15 14:32:55

标签: javascript html

所以我有这段代码:

var add, substract, multiply, divide;
var calculation = {
    add: {
        place: 2,
        name: add,
        calculation: function (a,b) {return a + b;},
        output: function (a,b) {return a + ' + ' + b;},
        buttonHTML: '+'
    },

    substract: {
        place: 2,
        name: substract,
        calculation: function (a,b) {return a - b;},
        output: function (a,b) {return a + ' - ' + b;},
        buttonHTML: '-'
    },

    multiply: {
        place: 1,
        name: multiply,
        calculation: function (a,b) {return a * b;},
        output: function (a,b) {return a + ' * ' + b;},
        buttonHTML: '*'
    },

    divide: {
        place: 1,
        name: divide,
        calculation: function (a,b) {return a / b;},
        output: function (a,b) {return a + ' / ' + b;},
        buttonHTML: '/'
    },
};
document.getElementById("calculator").innerHTML=('
for (var i = 0;i < 10; i++){
    var btn = document.createElement ("BUTTON");
    var t = document.createTextNode (i);
    btn.appendChild(t);

};');

在我的html文件中,脚本被加载到head元素中。在体内我有一个名为calculator的div元素。现在我想做的是用我的循环在div元素内创建按钮。但我写的东西似乎不起作用,我也找不到更好的解决方案。有什么想法吗?

2 个答案:

答案 0 :(得分:2)

创建按钮的功能对我来说很好看。唯一的事情是:它不是一个功能,它不会在任何地方执行。相反,它被指定为innerHTML的字符串。那不行。相反,使用这个:

window.onload = function () {
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("BUTTON");
        var t = document.createTextNode (i);
        btn.appendChild(t);
        document.getElementById("calculator").appendChild(btn);
    } 
};

答案 1 :(得分:1)

对于数字0到9,以下函数将在具有已知id的div中添加所需的按钮。它不一定会根据您的需要定位它们,也不会让它们按照您的要求做出响应,但它应该让它们进入div。

function insertNumberButtons(id) {
    for (var i = 0;i < 10; i++){
        var btn = document.createElement ("BUTTON");
        var t = document.createTextNode (i);
        btn.appendChild(t);
        document.getElementById(id).appendChild(btn);
    }
}