Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

What is the best JavaScript code to create an img element?

Javascript Object Oriented Programming Front End Technology

Creating an image element in JavaScript can be done in several ways. The most common approach is using document.createElement() or the Image() constructor.

Using document.createElement()

The standard DOM method to create an image element:

<!DOCTYPE html>
<html>
<head>
    <title>Create Image Element</title>
</head>
<body>
    <div id="container"></div>
    
    <script>
        // Create image element
        var myImg = document.createElement('img');
        myImg.src = 'https://via.placeholder.com/150x100';
        myImg.alt = 'Sample image';
        
        // Add to page
        document.getElementById('container').appendChild(myImg);
        console.log('Image element created and added to page');
    </script>
</body>
</html>

Image element created and added to page

Using Image() Constructor

The Image() constructor creates an image element but doesn't add it to the DOM automatically:

<!DOCTYPE html>
<html>
<head>
    <title>Image Constructor</title>
</head>
<body>
    <div id="output"></div>
    
    <script>
        // Create image with constructor
        var myImg = new Image();
        myImg.src = 'https://via.placeholder.com/200x150';
        myImg.alt = 'Created with constructor';
        
        // Must manually add to DOM
        document.getElementById('output').appendChild(myImg);
        console.log('Image created with constructor');
    </script>
</body>
</html>

Image created with constructor

Setting Image Dimensions

There are multiple ways to set the width and height of an image element:

<!DOCTYPE html>
<html>
<head>
    <title>Image Dimensions</title>
</head>
<body>
    <div id="images"></div>
    
    <script>
        var container = document.getElementById('images');
        
        // Method 1: setAttribute
        var img1 = document.createElement('img');
        img1.src = 'https://via.placeholder.com/300x200';
        img1.setAttribute('width', '100');
        img1.setAttribute('height', '80');
        container.appendChild(img1);
        
        // Method 2: Direct property
        var img2 = document.createElement('img');
        img2.src = 'https://via.placeholder.com/300x200';
        img2.width = 100;
        img2.height = 80;
        container.appendChild(img2);
        
        // Method 3: CSS style
        var img3 = document.createElement('img');
        img3.src = 'https://via.placeholder.com/300x200';
        img3.style.width = '100px';
        img3.style.height = '80px';
        container.appendChild(img3);
        
        console.log('Three images with different dimension methods created');
    </script>
</body>
</html>

Three images with different dimension methods created

Image Constructor with Dimensions

You can specify width and height directly in the Image() constructor:

<!DOCTYPE html>
<html>
<head>
    <title>Image with Initial Dimensions</title>
</head>
<body>
    <div id="result"></div>
    
    <script>
        // Create image with initial dimensions
        var myImg = new Image(120, 90);
        myImg.src = 'https://via.placeholder.com/300x200';
        myImg.alt = 'Resized image';
        
        document.getElementById('result').appendChild(myImg);
        console.log('Image created with dimensions: ' + myImg.width + 'x' + myImg.height);
    </script>
</body>
</html>

Image created with dimensions: 120x90

Comparison

Method Creates Element Adds to DOM Best For
document.createElement('img') Yes Manual Standard DOM manipulation
new Image() Yes Manual Preloading or dynamic creation
new Image(width, height) Yes Manual Creating with specific dimensions

Conclusion

Use document.createElement('img') for standard DOM manipulation. The Image() constructor is useful for preloading images or when you need to create images dynamically without immediately adding them to the page.

Updated on: 2026-03-15T23:18:59+05:30

241 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements