为什么带有 appendChild 的 DOM 添加会显示在浏览器上而不显示在源代码中？答案

【问题标题】：Why do DOM additions with appendChild display on the browser but not in the source?为什么带有 appendChild 的 DOM 添加会显示在浏览器上而不显示在源代码中？
【发布时间】：2021-05-09 16:43:43
【问题描述】：

我正在使用 appendChild 动态添加样式，它们可以工作，但它们不会出现在标记源中（尽管在 window.onload 之后调用了 appendChild）。

const style = document.createElement('style');
style.innerHTML = `h1{color:red;}`;
window.onload = function(){document.head.appendChild(style);}

https://jsfiddle.net/QK9sE0/9wtkr7mo/

【问题讨论】：

源是页面加载时下载的实际 HTML 文本。如果您想查看实际的 DOM 树，请查看 Elements 选项卡，或将 DOM 序列化为字符串。

标签： javascript dom appendchild

【解决方案1】：

因为源是源而不是 DOM 当前状态的实时表示。

如果您按照说明构建乐高模型，然后添加更多部件，则不会更改说明。

大多数浏览器都有一组开发者工具，带有一个 Inspect 选项卡，可以实时显示 DOM 的当前状态。

【讨论】：

...具有讽刺意味的是，开发人员经常错误地将其称为“源”。