Setting innerHTML vs. setting value with Javascript

When you want to use Javascript to change HTML, how do you know when to use either of the following?

document.getElementById("randomNumber").value = number;
document.getElementById("randomNumber").innerHTML = number;



Value is for input

innerHTML for div and span


Use .innerHTML to replace the entire inner body of the element with valid HTML you specify. A good example of this would be to place a nested div in an already existing div if an event occurs.

Use .value for form elements that request a value, such as a text input.


Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.

Here is a link showing the use of ID.value:


value is for form elements, innerHTML if you want to set the content of any other element.
There's also innerText if you want to set the text content (you won't have to escape anything in there, but no HTML works in there)


value is generally a property of specific i/o elements such as input elements (also including the type="hidden").

elements which are not such as div, p, a, etc. generally don't even have the value property and even if a value is set, does not affect the final output.


value represents the value that would be GETed or POSTed for input elements. innerHTML could change the contents actual elements.


value applies only to objects that have the value attribute (normally, form controls).

innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls).

They are not equivalent or replaceable. Depends on what you are trying to achieve...


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.