developer tip

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

copycodes 2020. 9. 15. 07:57
반응형

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


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

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


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

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

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

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

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

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

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

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

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

참고 URL : https://stackoverflow.com/questions/8013792/how-to-create-a-new-img-tag-with-jquery-with-the-src-and-id-from-a-javascript-o

반응형