JQuery добавить изображение внутри тега Div

154

У меня есть тег div

<div id="theDiv">Where is the image?</div>

Я хотел бы добавить тег изображения внутри div

Конечный результат:

<div id="theDiv"><img id="theImg"  src="theImg.png" />Where is the image?</div>

jquery

— Фил Паффорд
источник

301

Вы пробовали следующее:

$('#theDiv').prepend('<img id="theImg" src="theImg.png" />')

— Topher Fangio
источник

10

Я не могу ответить на Хосе Базилио выше (недостаточно репутации), но добавление добавит его ПОСЛЕ «Где изображение?». Prepend поставит его раньше.

— Topher Fangio

4

Я собирался отозвать вас за использование prepend, но я заметил, что в вашем селекторе отсутствует знак «#» ...

— Бен Келер,

1

Я бросил пистолет с добавлением. Хороший улов. +1

— Хосе Базилио

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

— PositiveGuy

попытался .append () и .html () добавить тег изображения, но изображение не загружается, хотя тег <img> отображается с источником правильно. Есть предложения по этому поводу?

— AnoopGoudar

52

мои 2 цента:

$('#theDiv').prepend($('<img>',{id:'theImg',src:'theImg.png'}))

— Куф
источник

Мне нравится этот ответ, потому что использование $ ('<img>'), искал его.

— user734028

Вы также можете добавить атрибуты после $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

— Скотт

25

$("#theDiv").append("<img id='theImg' src='theImg.png'/>");

Вам необходимо прочитать документацию здесь .

— jacobangel
источник

10

Если мы хотим изменить содержимое <div>тега при каждом image()вызове функции , мы должны сделать так:

Javascript

function image() {
    var img = document.createElement("IMG");
    img.src = "/images/img1.gif";
    $('#image').html(img); 
}

HTML

<div id="image"></div>
<div><a href="javascript:image();">First Image</a></div>

— Манжит Кумар
источник

1

Я предлагаю вам добавить некоторые объяснения.

— Ольтер

1

Если мы хотим изменить содержимое тега <div>, всякий раз, когда вызывается функция image (). мы должны сделать так / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ( '# изображение') HTML (IMG). } <div id = "image"> </ div> <div> <a href="javascript:image();"> Первое изображение </a> </ div>

— Манджит Кумар,

6

В дополнение к посту Манджита Кумара (у него не было декларации)

var image = document.createElement("IMG");
image.alt = "Alt information for image";
image.setAttribute('class', 'photo');
image.src="/images/abc.jpg";
$(#TheDiv).html(image);

— Эван Парсонс
источник

2

var img;
for (var i = 0; i < jQuery('.MulImage').length; i++) {
                var imgsrc = jQuery('.MulImage')[i];
                var CurrentImgSrc = imgsrc.src;
                img = jQuery('<img class="dynamic" style="width:100%;">');
                img.attr('src', CurrentImgSrc);
                jQuery('.YourDivClass').append(img);

            }

— Ананд Рао
источник