jQuery adiciona imagem dentro da tag div

154

Eu tenho uma tag div

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

Gostaria de adicionar uma tag de imagem dentro da div

Resultado final:

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

jquery

— Phill Pafford
fonte

301

Você já tentou o seguinte:

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

— Topher Fangio
fonte

10

Não posso responder a José Basílio acima (não há representante suficiente), mas o apêndice o colocará APÓS "Onde está a imagem?". Prepend irá colocá-lo antes.

— Topher Fangio

4

Eu estava prestes a upvote por usar preceder, mas notei que você está perdendo '#' em seu seletor ...

— Ben Koehler

1

Eu pulei a arma com acréscimo. Boa pegada. +1

— Jose Basilio

appendTo não funciona ... pelo menos no meu código e não era o correto a ser usado depois que eu li na página de documentos do jQuery antes mesmo de postar este tópico.

— PositiveGuy

tentei .append () e .html () adicionar a tag da imagem, mas a imagem não está carregando, embora a tag <img> apareça com a fonte corretamente. Alguma sugestão sobre isso?

— AnoopGoudar

52

meus 2 centavos:

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

— Kuf
fonte

Eu gosto desta resposta porque o uso de $ ('<img>') estava procurando por ela.

— usar o seguinte comando

você também pode adicionar atributos após o $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

— Scott

25

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

Você precisa ler a documentação aqui .

— jacobangel
fonte

10

Se quisermos alterar o conteúdo da <div>tag sempre que a função image()for chamada, temos que fazer o seguinte:

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>

— Manjeet Kumar
fonte

1

Eu sugiro que você adicione alguma explicação.

— Olter

1

Se quisermos alterar o conteúdo da tag <div>, sempre que a função image () for chamada. temos que fazer assim / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ('# imagem'). html (img); } <div id = "image"> </div> <div> <a href="javascript:image();"> Primeira imagem </a> </div>

— Manjeet Kumar

6

Além do post de Manjeet Kumar (ele não tinha a declaração)

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

— Evan Parsons
fonte

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);

            }

— Anand rao
fonte