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

请勿使用追加，请使用after，以便第二张图片位于第一张图片之后，而不是在第一张图片之内。

Answer 2

根据specification，<img>元素不能包含内容：

IMG元素没有内容;它是通常由图像替换内联由src属性指定的左或外的例外右对齐的图像 “浮出水面”。

因此，尝试嵌套<img>标记会导致未定义的行为。

Answer 3

这不是有效的HTML。您可以将<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元素可通过脚本获取内容。

如果使用XML解析器解析，img元素也可能包含内容，如果您使用XML内容类型（如application / xhtml + xml

）提供XHTML，则会发生这种情况。

由于这些原因，HTML5中的情况未定义。 the img element的文字说：

img元素的内容，如果有的话，被忽略的目的渲染。

因此，将元素添加为兄弟代替，如其他答案所示，是正确的分辨率。

我可以将img添加到img中吗？

4 个答案: