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

Question

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 load contents in text fields for final changes. Those text fields are title and content. Where title is a simple text field and content is quill text editor value. Here is my articles.component.html

Title:<br>
<input type="text" id="title-container" name="title" >
<br>
Content:<br>
<input type="text" id="content-container" name="content">
<br><br>
<input type="submit" value="Submit">

and here's my article.component.ts This method is called from somewhere else when I click edit button.

onPress2(id) {
    this._articleService.fetchArticle(id)
    .subscribe (
      data => {
        document.querySelector('#title-container').innerHTML=data.title;
        document.querySelector('#content-container').innerHTML=data.content;
      }
    );
  }

Everything works perfectly if I replace innerHTML with value. But I cannot do so because my content field has value something like <h1>How to make Cheese cake</h1><br>... because I am using quill text editor. Please tell me what wrong with this code.

Answer 1

I think all you looking for is

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