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

【问题标题】：JavaScript - Wondering how to add html elementsJavaScript - 想知道如何添加 html 元素
【发布时间】：2014-03-14 23:09:18
【问题描述】：

所以我有这个代码：

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 元素中。在正文中，我有一个名为计算器的 div 元素。现在我想做的是使用我拥有的循环在该 div 元素内创建按钮。但是我所写的似乎不起作用，我也找不到更好的解决方案。有什么想法吗？

【问题讨论】：

innerHTML 只能是字符串。你添加的东西看起来像是一个闭包和一个字符串的混合体，实际上并不存在。去掉 document.getElementById("calculator").innerHTML=part 并将其余代码放在一个在 window.onload 上调用的函数中。
但是如何让window.onload使用div元素中的功能呢？
我基本上是在标签中加载脚本。 div 标签位于标签中。 div id 是计算器，我想制作它以便脚本找到 div 并将按钮放入其中。
为什么不直接将按钮写入计算器Div？为什么要使用脚本来创建它们？
@JohannesH。是的，对不起，如果我不清楚。我的意思是 - 它不会做你期望它在当前上下文中做的事情。

标签： javascript html

【解决方案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);
    }
}

【讨论】：

【解决方案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);
    } 
};

【讨论】：

完美，正是我想要的。谢谢！
没问题 ;) 希望你不只是接受它，但你也明白为什么你的方法是错误的以及它是如何工作的？