How to create a new img tag with JQuery, with the src and id from a JavaScript object?

To create a new img tag with jQuery using data from a JavaScript object, you can pass an HTML string to the jQuery constructor or use the attribute object syntax.

Method 1: Using HTML String and attr()

Create an img element and set attributes using the attr() method:

<script>
// JavaScript object with image data
var imageData = {
    id: 'dynamic-image',
    src: 'https://via.placeholder.com/150',
    alt: 'Dynamic Image'
};

// Create img element and set attributes
var myImg = $('<img>');
myImg.attr('id', imageData.id);
myImg.attr('src', imageData.src);
myImg.attr('alt', imageData.alt);

// Append to body to display
$('body').append(myImg);

console.log('Image created with ID:', imageData.id);
</script>

Image created with ID: dynamic-image

Method 2: Using Attribute Object (Recommended)

Pass an object with all attributes directly to the jQuery constructor:

<script>
// JavaScript object with image data
var responseObject = {
    imgId: 'profile-pic',
    imgUrl: 'https://via.placeholder.com/200',
    altText: 'Profile Picture'
};

// Create img element with attributes in one step
var myImg = $('<img>', {
    id: responseObject.imgId,
    src: responseObject.imgUrl,
    alt: responseObject.altText,
    width: '200',
    height: '200'
});

// Append to body
$('body').append(myImg);

console.log('Image element created:', myImg[0].outerHTML);
</script>

Image element created: <img id="profile-pic" src="https://via.placeholder.com/200" alt="Profile Picture" width="200" height="200">

Method 3: Creating Multiple Images from Array

When working with multiple images from an array of objects:

<script>
// Array of image objects
var images = [
    { id: 'img1', src: 'https://via.placeholder.com/100', alt: 'Image 1' },
    { id: 'img2', src: 'https://via.placeholder.com/120', alt: 'Image 2' },
    { id: 'img3', src: 'https://via.placeholder.com/140', alt: 'Image 3' }
];

// Create and append each image
images.forEach(function(imgData) {
    var img = $('<img>', {
        id: imgData.id,
        src: imgData.src,
        alt: imgData.alt,
        style: 'margin: 5px; border: 1px solid #ccc;'
    });
    
    $('body').append(img);
    console.log('Created image with ID:', imgData.id);
});
</script>

Created image with ID: img1
Created image with ID: img2
Created image with ID: img3

Comparison

Key Points

• Use $('<img>', {attributes}) for clean, readable code
• Always set alt attribute for accessibility
• Remember to append the element to the DOM to make it visible
• Use attr() method for dynamic attribute setting

Conclusion

The attribute object method is the most efficient way to create img elements with jQuery. It allows you to set all attributes from a JavaScript object in a single, readable statement.