What's the difference between document.getElementById("test").value and document.getElementById("test").innerHTML

Question

document.getElementById("test").value

document.getElementById("test").innerHTML

Does the first mean the address and the second mean the value stored at the address? Also, where can I find documentation on the value property?

Protein

The w3schools site has a good reference on the HTML DOM . – Blais

@BrianRogers - Please do not recommend w3schools. See w3fools.com for why. – Upstream

@Upstream - I have found their HTML DOM reference to be quite useful. If you feel so strongly about the site, it would be more constructive for you to recommend an alternative reference for the HTML DOM. – Blais

@BrianRogers - Certainly. MDN is great. Factual and correct. – Upstream

Answer 1

.value gives you the currently-set value of a form element (input, select, textarea), whereas .innerHTML builds an HTML string based on the DOM nodes the element contains.

For a simple example, go to the JS Fiddle demo, and enter a new value into the input and then move out of the input.

The test uses the following JavaScript:

document.getElementById('input').onchange = function(){
    alert('innerHTML: ' + document.getElementById('input').innerHTML + '; whereas value: ' + document.getElementById('input').value);
};

(The above text updated, following a comment left by am not i am, in comments below.)

Floyd

I would love it if you would instead say ".innerHTML builds an HTML string based on the DOM nodes the element contains" (or something similar) since a DOM node doesn't strictly have any "HTML" content. – Thruway

@amnotiam, agreed. My text updated, and thank you for the clarification. =) – Floyd

Answer 2

some HTML elements have an attribute "value", such as <input/>some others don't have it.

if you want to modify them, you may use the DOM attribute (used with Javascript) innerHTML (if they have any). this attribute represents the content of an element, so it may be used for elements accepting to nest other element such as <div/>,

Miniaturist

Answer 3

Many elements in HTML can have an ID, so the definition of value will change for each.

value will be essentially what that element understands as a value. For example, an <input type=text> would give you the text inside.

innerHTML will be what HTML code is inside. For example, a <TR> would have its child TD's, plus whatever else is in there.

value and innerHTML can (usually) be written to, as well as read.

Rosenzweig

Answer 4

It has to do with how some tags work based on their attributes where others work on the text between the opening and closing tags.

.value retrieves whatever value is set for the value attribute of the tag. .innerHTML retrieves whatever is in between the opening and closing tag.

For example if the HTML tag was
<input type="text" value="Enter name here" id="user_name" />
and you used the JavaScript
var name = document.getElementById('user_name').value
would declare a variable name and give it the value "Enter name here" (assuming the user didn't change it). On the other hand if you have HTML like
<div id="abc">blah blah</div>
then you would use
var text = document.getElementById('abc')
and that would set the variable text to "blah blah".

Ocam

Answer 5

document.getElementByid('test').value

is use to give value in a text field. Like

<input type="text" id="test" name="test">

Now it put value in this text feild.

While document.getElementByid('test').innerHTML is use to to give value in a specified area. Like

<div id="test">
</div>

Now it print the value within the div area.

Accordant