innerHTML not showing up when added input element dynamically

Question

I am trying to add an <input> element using Javascript. However, the innerHTML is not showing up. Below is my code:

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);
}

The result of this code only produces two number input fields without the innerHTML. Is there anything wrong with my code?

Inputs have no content.

Oriol
– Oriol

2015-04-10 19:20:38 +00:00
Commented Apr 10, 2015 at 19:20 — Oriol
– Oriol, Commented Apr 10, 2015 at 19:20
can we give the input type after appeding a new element

lakshya_arora
– lakshya_arora

2015-04-10 19:22:52 +00:00
Commented Apr 10, 2015 at 19:22 — lakshya_arora
– lakshya_arora, Commented Apr 10, 2015 at 19:22

dfsq · Accepted Answer · 2015-04-10 19:23:04Z

3

Input elements don't have inner content you can set with innerHTML. Instead set value property:

input1.value = "years";

However, it seems that in your case you want to set placeholder:

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

or you can set corresponding property as well:

input1.placeholder = "years";

edited Apr 10, 2015 at 19:23

answered Apr 10, 2015 at 19:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Oriol Over a year ago

But they are number inputs. The value can't be "years".

dmeglio Over a year ago

I think you're trying to do an HTML5 placeholder? set the placeholder attribute to "years"

Downgoat Over a year ago

I recommend always using .setAttribute

jl90 Over a year ago

Thanks for the quick replies. However, I am not trying to create a placeholder.

dmeglio Over a year ago

@jl90, then you need to explain what you're trying to do because you defined something as allowing only 0-10 and provide an example of trying to set it to "years." Since an input tag has no innerHTML, I'm not sure what you're goal is unless you provide more detail.

|

adricadar · Accepted Answer · 2015-04-10 19:25:55Z

I think what you try to achieve is [label][input] in this case you have to add 2 new more elements on page.

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" />

Collectives™ on Stack Overflow

innerHTML not showing up when added input element dynamically

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related