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

Posted 2023-05-07

【中文标题】`innerHTML` 不适用于 `input` 标签，但 `value` 可以

【英文标题】：`innerHTML` not working with `input` tag but `value `does

【发布时间】：2020-01-22 20:13:18

【问题描述】：

我正在学习 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 文本编辑器。请告诉我这段代码有什么问题。

【问题讨论】：

输入元素没有innerHTML。请参阅此答案以获取更多参考：***.com/a/20604894/9387017

@CaffeinatedCod3r。这解决了我所有的疑惑。虽然我对这个问题没有很好的答案。但很快我会发布一个答案。谢谢。

很高兴听到这个消息。但是你的问题解决了吗？

实际上我正在获取数据。但是显示像这样<b>Some content</b> 而我希望它呈现为 Some content

这可能与您的 quill 文本编辑器有关。你在哪里得到这个值？在内容容器文本框内？

【参考方案1】：

我想你要找的只是

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

【讨论】：

嗯，你试过outerHTML吗？不过，如果我不回答噪音，我很抱歉。

谢谢先生。但是outerHTML 在这里不起作用。你会得到document.querySelector(...) is null"

【参考方案2】：

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

解决方案

您可以使用div 并添加属性contentEditable="true" 而不是input 标记，这将使其像输入字段一样可编辑：

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

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

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