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

Question

我正在尝试使用 Javascript 添加 <input> 元素。但是，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";

但是，您的情况似乎要设置 placeholder:

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

或者你也可以设置对应的属性:

input1.placeholder = "years";

Answer 2

我认为您要实现的目标是 [label][input] 在这种情况下，您必须在页面上添加 2 个新元素。

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

addElements();

<div id="duration" />

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

innerHTML not showing up when added input element dynamically

javascript

innerhtml