CODEWITHSUNDEEP
javascripthtmldominnerhtml
user784637
user784637

Reputation: 16142

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

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?

Upvotes: 6

Views: 16394

Answers (5)

santosh devnath
santosh devnath

Reputation: 172

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.

Upvotes: 0

Celeritas
Celeritas

Reputation: 15043

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

Upvotes: 2

David Thomas
David Thomas

Reputation: 253318

.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.)

Upvotes: 10

MPelletier
MPelletier

Reputation: 16687

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.

Upvotes: 3

user319198
user319198

Reputation:

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

Upvotes: 3

Related Questions