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" />')

— Верхній Фангіо
джерело

10

Я не можу відповісти на Жозе Басіліо вище (недостатньо реп.), Але додаток поставить це ПІСЛЯ "Де зображення?". Препенд поставить його раніше.

— Topher Fangio

4

Я збирався подати заявку на використання препенди, але я помітив, що у вашому селекторі пропущено "#" ...

— Бен Келер

1

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

— Хосе Басіліо

appendTo не працює ... принаймні в моєму коді, і його не було правильним для використання після того, як я прочитав його на сторінці документів jQuery ще до публікації цього потоку.

— PositiveGuy

спробували .append () та .html () додати тег зображення, але зображення не завантажується, хоча тег <img> з'являється разом із джерелом належним чином. Будь-які пропозиції щодо цього?

— AnoopGoudar

52

мої 2 копійки:

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

— Куф
джерело

мені подобається ця відповідь, бо використання $ ('<img>'), шукав її.

— користувач734028

Ви також можете додати атрибути після $ ('<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 () {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);

            }

— Ананд рао
джерело