English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Difference Between getElementById().innerHTML and getElementById().value

Because there are always new friends asking this question, the editor of Nahan tutorial specially compiled the methods needed by friends.

In simple terms: use value for forms, and use innerHTML for inserting characters.

For example, <input type="text" value="" id="jb51" />

Tags with value attributes can only use getElementById("jb51).value
Like <div id="jb51">12345</div>

Such tags without value attributes use getElementById("jb51).innerHTML

You can use document.getElementById() to get an element with an id on the page
Then access the attributes of this element, such as value

When an element has a value attribute, its value will be non-empty
Example1
<input type="text" id="txt1" value="hello"/>
Such an element, when you use document.getElementById("txt1).value, you can get its value, which is the string 'hello'.

If an element does not have a value, then using document.getElementById().value will not be able to get it. This is only natural, how can you access something that doesn't exist?
For example, a div tag may not necessarily have a value.

innerHTML
This refers to the content of the element
Example2

An element has a start tag and an end tag such as

<label id="lb1">this is a label</label>

When you use document.getElementById("lb1).innerHTML can get the content between <label> and </The content between label> is 'this is a label'.

You May Also Like