Могу ли я добавить IMG в IMG

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>

вот так выглядит мой код после того, как я использую приложение. и если вы посмотрите на него в firebug, вы увидите, что дочерний img выглядит так, как будто он не отображается, поэтому я попытался изменить видимость, но все же не повезло.

поэтому мой вопрос в том, можно ли это сделать, или я после недостижимого.

Answer 1

Не используйте append, используйте после , чтобы второе изображение находилось после первого, а не внутри него.

Answer 2

Согласно спецификации элемент <img> не может иметь содержимое:

Элемент IMG не имеет содержимого; это обычно заменяется встроенным изображением обозначенный атрибутом src, Исключение составляют левые или выровненные по правому краю изображения, которые "всплыл" из очереди.

Таким образом, попытка вложить теги <img> приведет к неопределенному поведению.

Answer 3

Это недостижимо, но не по причинам, указанным в других ответах. Хотя img является пустым элементом и, следовательно, не должен содержать контент, и при сериализации HTML анализатор никогда не поместит контент внутри элемента img, как вы обнаружили, это возможно для элемента img для получения контента посредством сценариев.

Элемент img также может иметь содержимое, если он анализируется с использованием анализатора XML, как это происходит, если вы обслуживаете XHTML с типом содержимого XML, например application / xhtml + xml

По этим причинам ситуация не является неопределенной в HTML5. Текст для элемента img гласит:

Содержимое элементов img, если оно есть, игнорируются в целях рендеринга.

Таким образом, добавление элемента как родного брата вместо этого, как указано в других ответах, является правильным решением.

Answer 4

Это недопустимый HTML.Вы можете добавить <img> как родного брата к другому, но вы не должны делать это в пределах существующего изображения.

Чтобы добавить после:

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

или раньше:

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