What is innerHTML on input elements?

user_1029146 0
Viewed 119049

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?

dom-manipulation dom html javascript
10 Answers
<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

user_114268220

innerHTML is a DOM property to insert content to a specified id of an element. It is used in Javascript to manipulate DOM.

Example.

HTML

Change

Javascript

function FunctionName(){
  document.getElementById(“example”).innerHTML = “Hello, Kennedy!”
}

On button Click, Hello, Kennedy! will appear because the innerHTML insert the value (in this case, Hello, Kennedy!) into between the opening tag and closing tag with an id “example”.

So, on inspecting the element after clicking the button, you will notice the following code :

<div id=”example”>Hello, Kennedy!</div>
user_61282870 

var lat = document.getElementById("lat").value;
lat.value = position.coords.latitude;
<input type="text" id="long" class="form-control" placeholder="Longitude">
<button onclick="getLocation()" class="btn btn-default">Get Data</button>
Instaed of using InnerHTML use Value for input types

user_105120290
Related