jQuery로 src와 id 속성을 지정하여 새 img 태그를 만드는 방법

웹 개발을 하다 보면 자바스크립트(JavaScript)에서 동적으로 이미지를 생성해야 하는 경우가 자주 있습니다. jQuery를 활용하면 src, id 같은 속성을 가진 새로운 <img> 태그를 아주 간단하게 만들 수 있습니다. 이번 글에서는 대표적인 두 가지 방법을 소개합니다.

방법 1: HTML 문자열을 생성자에 전달하기

가장 기본적인 방식은 HTML 문자열을 그대로 jQuery 생성자에 넘기는 것입니다. 먼저 id 속성이 포함된 img 요소를 만든 뒤, attr() 메서드로 src 속성을 지정할 수 있습니다.

var myImg = $('<img id="dynamic">');

$(document.createElement(myImg));
myImg.attr('src', responseObject.imgurl);

위 코드에서는 서버 응답(responseObject.imgurl)으로 받아온 이미지 URL을 동적으로 할당하는 예시를 보여줍니다. AJAX 통신 결과를 화면에 반영할 때 특히 유용한 패턴입니다.

방법 2: 속성 객체를 함께 전달하기

더 깔끔하고 권장되는 방법은 두 번째 인자로 속성 객체를 전달하는 것입니다. src, id, alt 등 여러 속성을 한 번에 설정할 수 있어 코드의 가독성이 크게 향상됩니다.

var myImg = $('<img />', {
    id: 'id1',
    src: 'exampleimg.png',
    alt: '대체 텍스트'
});

생성한 이미지를 문서에 추가하기

요소를 생성만 하고 DOM에 추가하지 않으면 화면에는 나타나지 않습니다. 다음과 같이 appendTo()나 append() 메서드를 사용해 원하는 위치에 삽입하세요.

// body 끝에 이미지 추가
myImg.appendTo('body');

// 또는 특정 컨테이너에 추가
$('#imageContainer').append(myImg);

마무리

정리하면, jQuery로 새로운 img 태그를 만들 때는 HTML 문자열을 직접 전달하는 방법과 속성 객체를 함께 넘기는 방법이 있습니다. 특히 두 번째 방법은 여러 속성을 구조적으로 관리할 수 있어 실무에서 더 많이 사용됩니다. 상황에 맞는 방식을 선택해 동적 이미지 생성을 효율적으로 처리해 보세요.