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

There is no innerHTML for input elements. See this answer for more reference: https://stackoverflow.com/a/20604894/9387017 — CaffeinatedCod3r, Sep 22 '19 at 16:19
@CaffeinatedCod3r. This solved all my doubts. Though I dont have a good answer to the question. But soon I'll post an answer. thanks. — Tanzeel, Sep 22 '19 at 16:25
Actually I am getting the data. But is showing like this `Some content` while I want it to be rendered like **Some content** — Tanzeel, Sep 22 '19 at 16:36
It might be related to your quill text editor. Where excatly are you getting this value? Inside content-contaier textbox? — CaffeinatedCod3r, Sep 22 '19 at 16:45
In this particular question I am not even using `quill`. Its a normal html form. — Tanzeel, Sep 22 '19 at 16:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199807/discussion-between-caffeinatedcod3r-and-tanzeel). — CaffeinatedCod3r, Sep 22 '19 at 19:05

score 0 · Answer 1 · answered Sep 22 '19 at 15:59

0

I think all you looking for is

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

answered Sep 22 '19 at 15:59

Fasid Mpm

557
6
10

Hmm, Did you try `outerHTML`? Still, If I am not answering sorry for the noise. – Fasid Mpm Sep 22 '19 at 16:07
Thanks Sir. But `outerHTML` will not work here. You'll get `document.querySelector(...) is null"` – Tanzeel Sep 22 '19 at 16:16

score 0 · Accepted Answer · answered Sep 22 '19 at 16:59

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

score 0 · Answer 3 · answered Jun 22 '23 at 10:07

innerHTML property is used to access or modify the HTML content inside an element. However, the input element is a void element in HTML, which means it cannot have any HTML content or child elements. Void elements, like input, img, or br, do not have closing tags and cannot contain other elements. Therefore, trying to access or modify innerHTML of an input element will not work as expected because it doesn't have any HTML content.

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

3 Answers3

Linked

Related