`innerHTML` Not Working With `input` Tag But `value `does

I am learning the MEAN stack. I'm performing CRUD operations. I'm stuck with update. Not with the operation exactly. Actually before updating a previously posted article I want to

Solution 1:

I think all you looking for is

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

Solution 2:

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