What Is Innerhtml on Input Elements

What is innerHTML on input elements?

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

How to write with innerHTML on input type text

You didn't set id to the input and there is no innerHTML property of type input. Use value instead.

document.getElementById('total').value = 'hi';

<h2>My First JavaScript</h2>  <input type="text" id="total" >

Inner HTML with input values

The new value is stored as a property not an attribute, the value can be obtained by inputelement.value, modifying the value does not affect the attribute. If you want the html with the new value just set the attribute to the new value.

For check boxes and radio buttons set the checked attribute, set the innerHTML for text areas, for selects set the selected attribute on the option

http://jsfiddle.net/mowglisanu/F7urT/5/

How to correctly use innerHTML to change text in text field

Use .value if you want to set values in input not innerHTML

      document.getElementById("button").onclick= function(){            var a = document.getElementById("one")            var b = document.getElementById("two")            var c = document.getElementById("three")                           if(a.value.length>b.value.length){                c.value = a.value             } else{                c.value = b.value             }        }

 <input type="text" id="one"/>    <input type="text" id="two"/>    <input type="text" id="three"/>    <button id="button">Button</button>

Why innerText,innerHTML property doesnt work on input tags in javascript?

Because inner refers to the content that is "in between" the opening and closing tags of an element. For example:

<p>This is the "innerText" or "textContent"</p>

The <input> element doesn't have a closing tag, so it can never contain any "inner" content. For these elements, use the .value property to access their content.

There are other elements that do not have a closing tag, but in the following cases, the elements don't have innerText or .value because they are not designed to store any data, only to have a semantic or structural effect on the HTML:

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

`innerHTML` not working with `input` tag but `value `does

I did some more research on html elements. Here are my observations and solution.
You cannot use innerHTML on input tag because it is a self closing tag and innerHTML as the name suggests works with tags which have both opening and closing tags For eg. div, 'span', etc. So, innerHTML and value are two different things.

Solution

Instead of an input tag, you can use div and add an attribute contentEditable="true" which will make it editable like input field:

<div contentEditable="true" id="content-container" value="">
</div>

This will solve the problem. And in ts file. You are good to use:

...
document.querySelector('#content-container').innerHTML=data.content;
...

When do I use .val() vs .innerHTML?

.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.

innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.

text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText

Reference links about innerHTML, innerText, val(), text(), html()

What Is Innerhtml on Input Elements