JavaScript 객체의 src 및 id를 사용하여 JQuery로 새 img 태그를 만드는 방법은 무엇입니까?

87

나는 JQuery를 기본적인 의미로 이해하지만 확실히 처음이며 이것이 매우 쉽다고 생각합니다.

JSON 응답 (객체로 변환 됨)에 내 이미지 src 및 id가 있으므로 responseObject.imgurl 및 responseObject.imgid에 올바른 값이 있으므로 이제 이미지를 만들어서 추가하고 싶습니다. div (이라고 부르 <div id="imagediv">겠습니다. 동적으로 빌드하는 데 약간 갇혀 있습니다 . 내가 <img src="dynamic" id="dynamic">본 대부분의 예제는 기존 이미지에서 src를 교체하는 것과 관련이 있지만 기존 이미지가 없습니다.

javascript jquery image

— 베드로
소스

138

jQuery에서는 아래와 같이 HTML 문자열을 생성자에 전달하여 새 요소를 만들 수 있습니다.

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

— 롭여
소스

@ a7omiton 컨텍스트 메뉴 또는 인스펙터를 통해 소스를 봅니까? 컨텍스트 메뉴 (또는 Ctrl + U)는 JavaScript로 변경하지 않고 서버에서받은 데이터를 표시합니다. DOM 검사기를 사용하여 실시간 변경 사항이있는 문서의 활성 HTML을 확인합니다.

— Rob W

죄송합니다 댓글을 삭제했습니다 : /, 이제 개발 도구에 표시됩니다. 페이지가 jquery 맵 404 문제로 인해 중단되었습니다

— a7omiton

그러나 이미지가 소스 페이지 (ctrl + u)에 표시되지 않는다는 것이

— 맞습니다

@ a7omiton 오른쪽 하단 모서리에있는 기어 아이콘을 클릭하고 "소스 맵 활성화"옵션을 비활성화하여 jquery.min.map에 대한 404 경고를 비활성화 할 수 있습니다.

— Rob W

예, 방금 paul_irish ( stackoverflow.com/questions/18365315/… ) 의 솔루션을 찾고있었습니다 . 감사합니다 :)

— a7omiton

86

var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));

— LA의 Frenchi
소스

17

.attr속성을 jQuery 생성자 에 전달하여 아예 피함으로써 일부 바이트를 절약 할 수 있습니다 .

var img = $('<img />',
             { id: 'Myid',
               src: 'MySrc.gif', 
               width: 300
             })
              .appendTo($('#YourDiv'));

— 에릭 베스트
소스

2

IE 8에서 동일한 기능이 필요한 사람들을 위해 다음과 같이 문제를 해결했습니다.

  var myImage = $('<img/>');

               myImage.attr('width', 300);
               myImage.attr('height', 300);
               myImage.attr('class', "groupMediaPhoto");
               myImage.attr('src', photoUrl);

IE8이 생성자에서 개체를 사용하도록 강제 할 수 없습니다.

— Wexoni
소스