`innerHTML` 不适用于 `input` 标签，但 `value ` 可以

Question

我正在学习 MEAN 堆栈。我正在执行 CRUD 操作。我坚持 update。不完全与操作。实际上，在更新之前发布的 article 之前，我想在文本字段中加载内容以进行最终更改。这些文本字段是 title 和 content。其中 title 是一个简单的文本字段，content 是 quill 文本编辑器值。这是我的 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">

这是我的 article.component.ts 当我单击 edit 按钮时，从其他地方调用此方法。

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

如果我将 innerHTML 替换为 value，一切都会完美无缺。但我不能这样做，因为我的 content 字段具有类似于 <h1>How to make Cheese cake</h1><br>... 的值，因为我正在使用 quill 文本编辑器。请告诉我这段代码有什么问题。

Answer 1

我想你要找的只是

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

Answer 2

我对 html 元素做了更多研究。这是我的观察和解决方案。您不能在 input 标签上使用 innerHTML，因为它是一个自闭合标签，而 innerHTML 顾名思义，适用于同时具有开始和结束标签的标签，例如。 div、'span' 等。所以，innerHTML 和 value 是两个不同的东西。

解决方案

您可以使用 div 代替 input 标签并添加一个属性 contentEditable="true"，这将使其像输入字段一样可编辑：

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

这将解决问题。在 ts 文件中。你很好用:

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

`innerHTML` 不适用于 `input` 标签，但 `value ` 可以

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

html

innerhtml

typescript