创建 img 元素并附加到 dom 没有终止答案

【问题标题】：Creating img element and appending to dom has no termination创建 img 元素并附加到 dom 没有终止
【发布时间】：2012-10-29 00:46:41
【问题描述】：

我已经有了一个相当复杂的 DOM 结构，我想消除未终止的图像元素导致问题的可能性。

看最简单的情况：

var prettyPicture = document.createElement("img");
//Add properties...
container.appendChild(prettyPicture );

工作正常，但是当我检查 dom 时，我看到 img 元素没有终止斜线，例如 <img/>

<img id="iamge-6816177" src="_site/images/detail/6816177.png">

在简单的布局视图中没有问题，但是当我查看包含大量这些元素的视图时，随机元素，甚至相同父节点中的相似图像都不会呈现，尽管它们的节点在 dom 检查器中。缺少终止是否会导致树出现任何问题？

【问题讨论】：

【解决方案1】：

img 元素的结束标记完全是可选的 - 这不会在任何浏览器中给您带来问题。事实上，在 HTML5 中，您现在根本不应该在 img 元素中包含 />。

此外，您在检查 DOM 时所看到的正是您的检查员选择显示没有结束标记的元素的方式 - 您可以确定 createElement() 和 appendChild() 正在生成有效的 HTML，因为您正在直接工作使用 DOM，而不是为浏览器提供文本以解析为 DOM 对象。

【讨论】：

【解决方案2】：

如果你担心

<img id="iamge-6816177" src="_site/images/detail/6816177.png">

而不是

<img id="iamge-6816177" src="_site/images/detail/6816177.png"/>

那么不用担心：痛苦的 XHTML 时代已经结束，HTML5 确认您不应该编写 XML 样式的自闭合标签。

来自the spec：

Void 元素只有一个开始标签；不得指定结束标签用于 void 元素。

[...]

虚空元素

area, base, br, col, command, embed, hr, img, input, 注册机、链接、元、参数、来源、跟踪、wbr

用结束标记使代码混乱是不好的做法。 HTML 不是 XHTML。

【讨论】：

【解决方案3】：

来自http://www.w3schools.com/tags/tag_IMG.asp

在 HTML 中，<img> 标签没有结束标签。

在 XHTML 中，<img> 标记必须正确关闭。

在所有情况下，浏览器都不会关心。

【讨论】：

【解决方案4】：

不，这不会导致任何问题。我会忽略它，因为这不会损害 w3.org 的合规性，因为 DOM 元素是动态生成的。

【讨论】：