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?

Answer 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

Answer 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.

Answer 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.

Answer 4

do you mean something like this:

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

Answer 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

Answer 6

Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.

JScript

<script type="text/javascript">
function changeText(){
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>

HTML

<p>Welcome to Stack OverFlow <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='changeText()' value='Change Text'/>

In the above example b tag is the innerhtml and dude is its value so to change those values we have written a function in JScript

Answer 7

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

For instance: document.getElementById("example").innerHTML = "my string";

This example uses the method to "find" an HTML element (with id="example") and changes the element content (innerHTML) to "my string":

HTML Change

Javascript

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

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

So, if you inspect the element after clicking the button, you will see the following code :

<div id=”example”>Hello, World!</div>

That’s all

Answer 8

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>

Answer 9

Use

document.querySelector('input').defaultValue = "sometext"

Using innerHTML does not work on input elements and also textContent

Answer 10

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