Geek Answers Handbook

Difference between ".innerHTML" and ".value" in JS

I am confused what is the difference between .innerHTML and .value in JavaScript. Here is my code:

 <body> Input string: <input type="text" id="input" /> .... </body>

When I use this code, I cannot get the contents of the input string:

 var str=document.getElementById("input").innerHTML;

While I use the following code, it works:

 var str=document.getElementById("input").value;

Does anyone know what is the difference between the two?

+5
source share
3 answers

value refers to the value of the input element (or textearea)

 <input value="hello world">

the value will be "hello world" (or any value entered inside)

innerHTML refers to content inside an HTML element.

 <div> <span class="hello"> All tags and their children are include in innerHTML. </span> All this is part of innerHTML. </div>

innerHTML of the div tag will be a string:

  '<span class="hello"> All tags and their children are include in innerHTML. </span> All this is part of innerHTML.'
+15
source

The .innerHTML property refers to HTML lettering, which, when assigned, is interpreted and included in the DOM (Document Object Model) for the current document. The .value property, on the other hand, simply refers to the contents of a typically HTML input control, such as a text field. Not every HTML element supports the input property, while most, if not all, support the innerHTML property.

+2
source

.value gives you the currently set value of the form element (input, select, textarea), while .innerHTML creates an HTML string based on the DOM nodes contained in this element.

+1
source

More articles:


All Articles