What is innerHTML on input elements?

javascript html dom dom-manipulation
temporary_user_name picture temporary_user_name · Dec 16, 2013 · Viewed 92.3k times · Source

I'm just trying to do this from the chrome console on Wikipedia. I'm placing my cursor in the search bar and then trying to do document.activeElement.innerHTML += "some text" but it doesn't work. I googled around and looked at the other properties and attributes and couldn't figure out what I was doing wrong.

The activeElement selector works fine, it is selecting the correct element.

Edit: I just found that it's the value property. So I'd like to change what I'm asking. Why doesn't changing innerHTML work on input elements? Why do they have that property if I can't do anything with it?

Answer

Ajith S picture Ajith S · Dec 16, 2013

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.

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

Related questions

How do I clear the contents of a div without innerHTML = "";

I have a div that is filled by JS created DOM elements, I want the div to be cleared upon the JS function repeating, however I have heard that using document.getElementById('elName').innerHTML = ""; is not a good idea, What …

Read More
Find javascript that is changing DOM element

Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I …

Read More
How can I remove wrapper (parent element) without removing the child?

I would like to remove the parent without removing the child - is this possible? HTML structure: <div class="wrapper"> <img src""> </div> <div class="button">Remove wrapper</div> After …

Read More