javascript - 动态添加输入元素时，innerHTML 不显示

Question

我正在尝试添加 <input>使用 Javascript 的元素。但是，innerHTML 没有显示。下面是我的代码:

function addElements()
{
    container = document.getElementById("duration"); //a div container
    var input1 = document.createElement("input");
    var input2 = document.createElement("input");
    input1.type = "number";
    input1.min = "0";
    input1.max = "10";
    input1.required = true;
    input1.innerHTML = "years";
    input2.type = "number";
    input2.min = "0";   
    input2.max = "12";
    input2.required = true;
    input2.innerHTML = "months";
    container.appendChild(input1);
    container.appendChild(input2);
}

这段代码的结果只产生两个数字输入字段，没有innerHTML。我的代码有什么问题吗？

Answer 1

输入元素没有可以使用 innerHTML 设置的内部内容。而是设置 value 属性:

input1.value = "years";

但是，在您的情况下，您似乎想要设置占位符:

input1.setAttribute("placeholder", "years");

或者您也可以设置相应的属性:

input1.placeholder = "years";