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

위의 Jose Basilio (응답이 충분하지 않음)에 응답 할 수 없지만 append는 "이미지가 어디에 있습니까?" Prepend가 우선합니다.

— Topher Fangio

4

prepend를 사용해 주셔서 감사합니다. 셀렉터에서 '#'이 누락 된 것을 발견했습니다.

— Ben Koehler

1

나는 추가로 총을 뛰어 올랐다. 잘 잡았습니다. +1

— Jose Basilio

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') 다음에 속성을 추가 할 수도 있습니다.

— Scott

25

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

여기 에서 설명서를 읽어야합니다 .

— 야곱 엔젤
소스

10

<div>함수 image()가 호출 될 때마다 태그 의 내용을 변경하려면 다음과 같이해야합니다.

자바 스크립트

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

설명을 추가해 보시기 바랍니다.

— Olter

1

<div> 태그의 내용을 바꾸고 싶다면, image () 함수가 호출 될 때마다. 우리는 다음과 같이해야합니다. function image () {var img = document.createElement ( "IMG"); img.src = "/images/img1.gif"; $ ( '# image'). html (img); } <div id = "image"> </ div> <div> <a href="javascript:image();"> 첫 번째 이미지 </a> </ div>

— Manjeet Kumar

6

Manjeet Kumar의 게시물 외에도 (그는 선언이 없었습니다)

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

            }

— 아난드 라오
소스