jQuery aggiunge l'immagine all'interno del tag div

154

Ho un tag div

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

Vorrei aggiungere un tag immagine all'interno del div

Risultato finale:

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

jquery

— Phill Pafford
fonte

301

Hai provato quanto segue:

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

— Topher Fangio
fonte

10

Non posso rispondere a Jose Basilio sopra (non abbastanza rappresentante) ma append lo metterà DOPO "Dov'è l'immagine?". Prepend lo metterà prima.

— Topher Fangio,

4

Stavo per votarti per aver usato prepend, ma ho notato che ti manca '#' nel tuo selettore ...

— Ben Koehler,

1

Ho saltato la pistola con append. Buona pesca. +1

— Jose Basilio,

appendTo non funziona ... almeno nel mio codice e non era quello giusto da usare dopo averlo letto nella pagina dei documenti di jQuery anche prima di pubblicare questo thread.

— Positivo

provato .append () e .html () per aggiungere il tag immagine, ma l'immagine non si sta caricando sebbene il tag <img> sia visualizzato correttamente con l'origine. Qualche suggerimento su questo?

— AnoopGoudar,

52

i miei 2 centesimi:

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

— KUF
fonte

mi piace questa risposta perché l'utilizzo di $ ('<img>') lo cercava.

— user734028

puoi anche aggiungere attributi dopo $ ('<img'). attr ('id', 'theImg'). attr ('src', 'theImg.png')

— Scott

25

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

Devi leggere la documentazione qui .

— jacobangel
fonte

10

Se vogliamo cambiare il contenuto del <div>tag ogni volta che image()viene chiamata la funzione , dobbiamo fare così:

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

Ti suggerisco di aggiungere qualche spiegazione.

— Olter

1

Se vogliamo cambiare il contenuto del tag <div>, ogni volta che viene chiamata la funzione image (). dobbiamo fare come questo / function image () {var img = document.createElement ("IMG"); img.src = "/images/img1.gif"; $ ( '# immagine') html (img).; } <div id = "image"> </div> <div> <a href="javascript:image();"> First Image </a> </div>

— Manjeet Kumar,

6

Oltre al post di Manjeet Kumar (non aveva la dichiarazione)

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