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;
-
The best answer to this question is on SuperUser: superuser.com/questions/1037389/innerhtml-vs-value-when-and-whyMalcolm– Malcolm2021-12-09 01:04:21 +00:00Commented Dec 9, 2021 at 1:04
Add a comment
|
8 Answers
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: http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
1 Comment
Martin Melichar
Saying something is normal is not actual explanation.
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.
Comments
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...
Comments
value represents the value that would be GETed or POSTed for input elements. innerHTML could change the contents actual elements.
Comments
Value is for input
innerHTML for div and span
Comments
It's a little late for him but I was also looking for an answer and I think according to Skyrim answer It is possible to do something like this Thanks
function enterValue() {
var childNodes = document.body.childNodes;
for (x of childNodes) {
if(x.nodeName=="INPUT"){
// element is an INPUT html tag
x.value = "my input value";
}else{
// element is anything other than an INPUT
x.innerHTML = "my input value";
}
}
}<!DOCTYPE html>
<html>
<body>
<input name="mInput" />
<div></div>
<p id="demo"></p>
<input type="button" onclick="enterValue()" value="enterValue">
</body>
</html>
Comments
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.
