What is innerHTML on input elements?

Question

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?

Solution 1

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

Solution 2

First understand where to use what.

<input type="text" value="23" id="age">

Here now

var ageElem=document.getElementById('age');

So on this ageElem you can have that many things what that element contains.So you can use its value,type etc attributes. But cannot use innerHTML because we don't write anything between input tag

  <button id='ageButton'>Display Age</button>

So here Display Age is the innerHTML content as it is written inside HTML tag button.

Solution 3

Using innerHTML on an input tag would just result in:

<input name="button" value="Click" ... > InnerHTML Goes Here </input>

But because an input tag doesn't need a closing tag it'll get reset to:

<input name="button" value="Click" ... />

So it's likely your browsers is applying the changes and immediatly resetting it.

Solution 4

do you mean something like this:

$('.activeElement').val('Some text');

Solution 5

<input id="input" type="number">

document.getElementById("input").addEventListener("change", GetData);

function GetData () {
  var data = document.getElementById("input").value;
  console.log(data);
  function ModifyData () {
    document.getElementById("input").value = data + "69";
  };
  ModifyData();
};

My comments: Here input field works as an input and as a display by changing .value

View more solutions

Comments

[Praveen Prasannan]

great answr bro. Keep going. My +1

[Amarnath Balasubramanian]

design2core.com/myblog/css/…

[don_Bigote]

@PraveenPrasannan here is an example of value in use js: var a = document.getElementById('info'); a.value = 'the earth is round'; then in your html: <input type="text" name="lname" id="info">