How to Append Multiple Image Elements to a DOM Element with JavaScript

Learn how to easily append multiple image elements to a DOM element in JavaScript and why the `appendChild` method doesn't work as expected for the same elements.
---
This video is based on the question https://stackoverflow.com/q/67489313/ asked by the user 'matt2k12' ( https://stackoverflow.com/u/13379712/ ) and on the answer https://stackoverflow.com/a/67489403/ provided by the user 'krisam' ( https://stackoverflow.com/u/12485962/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: how to append multiple img-child elements to a DOM element with JS?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Append Multiple Image Elements to a DOM Element with JavaScript

Adding multiple image elements to a DOM element can be a common requirement in web development. You might find yourself in situations where you need to display the same image multiple times within a div or any other HTML container element.

However, many developers mistakenly try to append the same image element multiple times using the appendChild method, only to find that it does not work as intended. Instead of achieving the desired result of multiple image tags, you only see one image rendered in the browser. In this guide, we will explore the problem and provide a simple yet effective solution.

The Problem Explained

The main issue arises because of how the appendChild method works in JavaScript. When you append an existing node (like an <img> element you have already created) to a new parent node, the node is moved from its original location rather than duplicated. This behavior results in the situation where, after appending the same image multiple times, only one appears in the DOM:

[[See Video to Reveal this Text or Code Snippet]]

Intended Result

You might want the final result to look like this:

[[See Video to Reveal this Text or Code Snippet]]

The Solution: Creating New Image Elements

To accomplish this, you need to create a new image element for each append operation within a loop. This way, you are appending new instances of the image element instead of moving the existing one.

Step-by-Step Implementation

Select the Parent Element: Use document.getElementById or any other selector method to get the div element where you want to append the images.

Create a Loop: Use a loop to iterate for the desired number of images.

Create New Image Elements: Each time through the loop, create a new <img> element using document.createElement('img').

Append Each New Image: Use appendChild to add each newly created image element to the parent div.

Here's how you can implement this:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

var div = document.getElementById('myId');: This line grabs the div element where the images will be added. Remember to replace 'myId' with the actual ID of your target div.

for (var i = 0; i < 3; i+ + ) { ... }: This loop executes three times (you can adjust the 3 to change the number of images).

var img = document.createElement('img');: Inside the loop, a new <img> element is created in each iteration.

div.appendChild(img);: The new image element is added to the div for every loop iteration, resulting in multiple image tags in your HTML structure.

Conclusion

Appending multiple image elements to a DOM element in JavaScript is straightforward when you understand how to create new instances of elements. Remember that appending the same element multiple times won't yield the results you expect. Instead, always create new elements for each append action to achieve the desired outcome. With this technique, you can dynamically add images or any other elements to your web applications with ease.

Happy coding!