为什么 `document.createElement` 不允许创建自闭合标签？答案

【问题标题】：Why does `document.createElement` do not allow the creation of self-closing tags?为什么 `document.createElement` 不允许创建自闭合标签？
【发布时间】：2021-12-30 09:29:36
【问题描述】：

示例 JavaScript

<html>
<body>
<form id="test"></form>
</body>
</html>

let input_el = document.createElement('input');
input_el.setAttribute('type','text');
input_el.setAttribute('name','your_name');
let my_form = document.getElementById('test');
my_form.prepend(input_el);

在 windows 上的 chrome 开发人员工具中生成以下输出（chrome 版本 96.0.4664.45）：

而且不是正确的形式：

<input type="text" name="your_name">

另见此小提琴：https://jsfiddle.net/m1fqzLv6/

目前我没有找到任何允许这样做的 javascript 函数。

【问题讨论】：

"Produces: <input type="text" name="your_name"></input>" 您在哪里看到/如何获得该文本输出？不管它是什么，它是如何创建输出的一个方面，而不是 createElement 所做的。
createElement 根本不创建任何标签。它创建元素（内存中的对象）。（标签是您在标记中用来告诉解析器创建元素的文本符号。）
FWIW，在 Safari 中，它在 DOM 检查器中呈现为 <input ...>，但是当您展开它时，它会得到一个 </input> 以显示展开后元素的结束位置。也就是说，无论如何，您根本不是在查看 HTML 标记，而是在查看 DOM 的可视化表示，开发人员工具选择使用类似 HTML 的表示，因为这很有意义。但是您仍然没有看到任何 Javascript 生成的 HTML。
1. Chrome dev tools Elements view 2. Chrome dev tools console 即使这样做，这只是该工具如何显示它以进行调试的一个怪癖。再说一遍：createElement 没有创建任何标签，并且您创建元素的代码也很好。这里没有要解决的问题。你的代码很好。去享受吧！
@T.J.Crowder 我认为这是影子 DOM。我检查了开发工具中的 shadow DOM 选项，chrome 似乎为输入元素生成了一些 shadow dom。

标签： javascript dom tags

【解决方案1】：

这个问题是基于document.createElement() 会生成 HTML 代码的假设。这是不正确的。

实际上，HTML 代码被解析为文档对象模型 (DOM)。 JavaScript 可以随后修改 DOM（另见上面 T.J. Crowder 的 cmets）。在您的示例中，添加了一个 <input> 元素。

Chrome 在其开发者工具中，以大多数开发者可以轻松阅读的 HTML 代码表示 DOM。如果 DOM 中有 <input> 元素，开发工具面板必须决定如何表示它。显然，它选择了带有<input></input> 的长格式。然而，这只是一个输出决定。

【讨论】：