为什么 JavaScript 中的“innerHTML”属性不能是 HTML 属性？答案

【问题标题】：Why "innerHTML" property from JavaScript can't be an HTML attribute?为什么 JavaScript 中的“innerHTML”属性不能是 HTML 属性？
【发布时间】：2017-10-19 19:09:05
【问题描述】：

众所周知，使用JavaScript“innerHTML”属性更改HTML元素的HTML内容是常用的。此“innerHTML”属性用于 HTML 元素对象，例如 (document.getElementById("demo").innerHTML = 5 + 6;)

我的疑问是为什么“innerHTML”属性不能用作任何 HTML 元素中的属性？

据我所知和理解，属性和属性具有相同的语义。

那么，为什么下面的代码不能工作？

<p id="demo" innerHTML="Jumbo"></p>

【问题讨论】：

JS 中的 HTMLElement 和实际的 HTML Element 是有区别的。 innerHTML 是一个 JS DOM 属性。您可以使用document.getElementById("demo").getAttribute('innerHTML') 访问该属性——否则，只需将文本放在段落Jumbo
我不确定，但 innerHTML 就像一个函数，它首先删除所有元素的子元素，解析内容字符串并将结果节点分配为元素的子元素。见developer.mozilla.org/en/docs/Web/API/Element/innerHTML
JS部分是DOM API规范，HTML5是不同的规范。 “innerHMTL”属性不是 HTML5 规范的一部分。

标签： javascript html properties attributes

【解决方案1】：

因为并非 DOM 元素上的所有 JavaScript 属性都等同于属性。

.innerHTML 提供了一种获取或设置开始和结束标记之间内容的方法。所以如果你想把东西放在那里，就把它放在那里：

<p id="demo">Jumbo</p>

编辑：为了回答您下面的问题，DOM 是代码中 HTML 的概念表示（在本例中为 JavaScript），因此 DOM 元素是一个 JavaScript 对象，您可以使用它来访问和操作 HTML 元素（元素是 HTML 文档的一部分，以标签开头和结尾，因此Hello! 包含两个元素，一个b 元素和一个span 元素。

要使用.innerHTML 获取元素的内容，您只需在表达式中访问它，而不是为其赋值。

例子：

var d = document.getElementById('myDiv');

console.log(d.innerHTML); // <em>Jumbo</em>

&lt;div id="myDiv"&gt;&lt;em&gt;Jumbo&lt;/em&gt;&lt;/div&gt;

【讨论】：

感谢您的回答。请您帮我解释一下 DOM 元素的确切含义以及它们是什么？另外，请解释一下如何使用 innerHTML 属性来获取 HTML 元素中的内容？谢谢。
@user2839497 更新了我的答案。

【解决方案2】：

<div innerHTML="<p>example text</p>"></div>

<div> <p>example text</p> </div>


<div innerHTML="<p>replaceer</p>"> <p>replace this</p> </div>

不知道为什么有人会使用它。

【讨论】：