JavaScript动态创建元素与HTML静态元素的DOM相等性问题

核心原因在于DOM元素的引用机制和outerHTML、innerHTML的工作逻辑：

• 调用container.outerHTML时，返回的是该元素的HTML代码字符串（包含元素自身的标签、属性和子内容）。
• 执行contentsDiv.innerHTML = container.outerHTML时，浏览器会重新解析这个字符串，创建一个全新的DOM元素节点并插入到contentsDiv中。这个新节点和你之前用JS创建的container是两个完全独立的对象，内存中的引用地址完全不同。

而==或===判断DOM元素时，比较的是对象的内存引用地址，不是元素的结构或内容。哪怕两个元素的HTML结构完全一致，只要是不同的内存对象，判断结果就是false。

如果要让contentsDiv.firstChild === container成立，应该使用DOM节点操作方法直接操作原节点，比如：

// 直接将原container节点添加到contentsDiv
contentsDiv.appendChild(container);

// 如果需要先清空contentsDiv内容
contentsDiv.innerHTML = '';
contentsDiv.appendChild(container);

这种方式是把原container节点直接移入contentsDiv，此时contentsDiv.firstChild就是原container对象的引用，判断结果会是true。

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