JavaScript generated input tag not displaying text

Question

Ive been attempting to insert an input tag into the DOM with JavaScript.The problem arises when I set the innerHTML property of the input tag to some text.

One thing I noticed was that in Chrome developer tools the JavaScript generated input had a closing tag. Isn't the input tag a self closing tag?

When I checked developer tools I get no errors. Also, when I inspect the elements the input tag will appear along with the associated text but it will not appear on the window. Any idea, what causes this issue?

//javascript
function Survey() {}

Survey.prototype.displaySurvey = function() {
var form = document.createElement("form");
form.setAttribute("action", "none");
form.setAttribute("method", "get");
document.body.appendChild(form);

var input = document.createElement("input");
input.setAttribute("name", "prod");
input.setAttribute("type", "text");
input.innerHTML = "product";
form.appendChild(input);
}

window.onload = main;

function main() {
  var survey = new Survey();
  survey.displaySurvey();
}


<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<script type="text/javascript" src="survey1.js"></script>
</head>
<body>
</body>
</html>

<input>'s do not have innerHTML - they have a value

Jaromanda X
– Jaromanda X

2017-10-12 00:20:12 +00:00
Commented Oct 12, 2017 at 0:20 — Jaromanda X
– Jaromanda X, Commented Oct 12, 2017 at 0:20

Ben · Accepted Answer · 2017-10-12 00:23:00Z

1

Won't work. Per the MDN docs:

Permitted content None, it is an empty element.

If you need text in there, edit the value attribute

answered Oct 12, 2017 at 0:23

Ben

5,6952 gold badges24 silver badges32 bronze badges

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

Comments

Hayden Passmore · Accepted Answer · 2017-10-12 01:02:55Z

1

Hi if you just want to add an input with the value "option" change your javaScript to the following. This will create an input field inside the newly created div with the id "content".

function Survey() {}

Survey.prototype.displaySurvey = function() {
   var form = document.createElement("form");
   form.setAttribute("action", "none");
   form.setAttribute("method", "get");
   document.body.appendChild(form);

   /*var input = document.createElement("input");
   input.setAttribute("name", "prod");
   input.setAttribute("type", "text");
   input.innerHTML = "product";
   form.appendChild(input);*/
   document.getElementById("content").innerHTML ="<input type='text' name='prod' value='product' />";
}

function main() {
  var survey = new Survey();
  survey.displaySurvey();
}

//window.onload = main;
window.onload = function(){
    main();
};

And your html

<!DOCTYPE html>
<html>
<head>
<title>form test</title>
<script type="text/javascript" src="survey1.js"></script>
</head>
    <body>
        <div id="content">
        </div>
    </body>
</html>

Hope this helps!

answered Oct 12, 2017 at 1:02

Hayden Passmore

1,1532 gold badges12 silver badges35 bronze badges

5 Comments

Troy Leu Over a year ago

why did you do window.onload = function() { main(); }; instead of window.onload = main; ?

Hayden Passmore Over a year ago

I did that because when I tested it locally I couldn't get it to work with just window.onload = main; for some reason. However if it works doing it your way that is fine. window.onload = function() { main(); }; Allows you to do multiple thing on the onload event. See here

Hayden Passmore Over a year ago

I just tested it again with window.onload = main; and it works fine lol. It may had just been due to a bug in my testing. good luck!

Troy Leu Over a year ago

Thank you for your help!

Hayden Passmore Over a year ago

No worries! don't forget to mark it as the correct answer if it worked.

Collectives™ on Stack Overflow

JavaScript generated input tag not displaying text

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related