Question

因此，我尝试了是否可以使用jquery将图像附加到图像上，这是有效的，但图像似乎不见了，或者可见性被隐藏，并且没有显示，或者看起来是这样。

所以我的问题是，这可以做到吗？我可以使用这个图像吗。这是我正在做的一个项目。

<img src="img/map.png" style="width: 600px; height: 400px; z-index: -100;">

    <img src="img/dot.png" style="position: relative; width: 20px; 
         height:34px; top: 200px; left: 200px; z-index: 100; 
        display: block; visibility: visible;">

</img>

这就是使用append后我的代码的样子。如果你在firebug中查看它，你会发现子img看起来没有显示，所以我尝试更改可见性，但仍然没有成功。

所以我的问题是，这能做到吗？还是我追求的是遥不可及。

Answer 1

根据规范<；img>；元素不能包含内容：

The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line.

所以尝试嵌套<；img>标记会导致未定义的行为。

Answer 2

不要使用追加，请使用在之后，以便第二个图像在第一个图像之后，而不是在其内部。

Answer 3

这不是有效的HTML。您可以附加一个＜code＞<；img>作为的兄弟，但不应该在现有映像中执行。

要在后面追加：

$(imageSelector).after( <img ... /> ); // method 1
$( <img ... /> ).insertAfter(imageSelector); // method 2

或之前：

$(imageSelector).before( <img ... /> ); // method 1
$( <img ... /> ).insertBefore(imageSelector); // method 2

Answer 4

这是无法实现的，但不是因为其他答案中给出的原因。尽管img是一个void元素，因此不应包含内容，并且在HTML序列化中，解析器永远不会将内容放置在img元素中，但正如您所发现的，img元素有可能通过脚本获取内容。

如果＜code＞img＜/code＞元素使用XML解析器进行解析，那么它也可能具有内容，就像您为XHTML提供XML内容类型（如application/XHTML+XML）一样

由于这些原因，HTML5中的不是未定义的。img元素说：

The contents of img elements, if any, are ignored for the purposes of rendering.

因此，如其他答案所示，将元素添加为同级元素才是正确的解决方案。

友情链接