为什么document.createElement无法生成正确格式的自闭合标签？

问题原因 #

• 你在Chrome开发者工具里看到的非自闭合展示，只是开发者工具自身的序列化展示逻辑，和实际生效的DOM结构没有关系。document.createElement创建的input本身就是符合W3C规范的空元素，不会存在多余的闭合节点，实际运行时功能完全符合预期。
• DOM是浏览器内存中的树形节点结构，和你编写的HTML文本源码不是同一个概念。浏览器解析HTML或者通过JS创建DOM后，不会保留原始的文本标签写法，你通过JS创建的input节点从功能、结构上都完全等价于手写<input type="text" name="your_name">对应的DOM节点。
• 如果你要将生成的DOM导出为标准HTML字符串，原生的innerHTML/outerHTML在大部分现代浏览器里输出input这类空元素都会是自闭合的正确格式，不需要额外处理。

解决方案 #

仅担心功能异常的场景 #

不需要做任何额外处理，JS生成的input元素功能完全正常，不存在结构问题，开发者工具的展示效果不会影响实际运行逻辑。

需要获取正确格式HTML字符串的场景 #

直接调用元素的outerHTML属性即可，示例代码如下：

let input_el = document.createElement('input');
input_el.setAttribute('type','text');
input_el.setAttribute('name','your_name');
// 直接获取序列化的HTML字符串
console.log(input_el.outerHTML); // 输出 <input type="text" name="your_name">

要强制控制序列化格式的特殊场景 #

如果遇到少数浏览器outerHTML输出不符合预期的情况，可以手动拼接字符串后再插入DOM，示例如下：

const inputStr = `<input type="text" name="your_name">`;
const my_form = document.getElementById('test');
my_form.insertAdjacentHTML('afterbegin', inputStr);

这种方式会直接按照你编写的字符串解析为DOM，同时获取到的outerHTML也会完全符合预期格式。

内容的提问来源于stack exchange，提问作者Sebi2020