Can I append a img to a img

So I tried out if I can append using jquery a image to an image and it works, but the image seems to be gone or visibility is hidden and display none or so it seems.

So my question is can this be done and can I use this image. Its for a project I am working on.

<img src="img/map.png" style="width: 600px; 开发者_Python百科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>

thats what my code looks like after I use the append. and if you look at it in firebug you see that the child img looks like it is not displayed so I tried changing the visibility but still not luck.

so my question is can this be done or am I after the unattainable.

Don't use append, use after so that the second image goes after the first, not inside it.

According to the specification the <img> element cannot have content:

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.

So trying to nest <img> tags would result into undefined behavior.

That is not valid HTML. You can append an <img> as a sibling to another, but you shouldn't do it within an existing image.

To append after:

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

or before:

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

It's unattainable but not for the reasons given in the other answers. Although img is a void element and therefore should not contain content, and in the HTML serialization, the parser will never place content inside an img element, as you have discovered, it is possible for an img element to gain content through scripting.

It is also possible for an img element to have content if it parsed using an XML parser, as happens if you serve XHTML with an XML content type such as application/xhtml+xml

For these reasons, the situation is not undefined in HTML5. The text for the img element says:

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

So adding the element as a sibling instead, as given in the other answers, is the correct resolution.