Load and append images to DOM with JavaScript/jQuery

This post will discuss how to load and append images to the DOM in JavaScript and jQuery.

1. Using JavaScript

In pure JavaScript, you can use the Image constructor to programmatically create an image with necessary attributes and append it to a DOM container using the Node.appendChild() method.

Edit in JSFiddle

2. Using jQuery

With jQuery, you can dynamically create a new image element and append it at the end of the DOM container using the .append() method. This is demonstrated below:

Edit in JSFiddle

 
Here’s an alternate version using the appendTo() method, which is similar to the append() method but has a different syntax w.r.t the placement of the content and target.

Edit in JSFiddle

 
Another plausible way is to use jQuery’s .html() method, as shown below:

Edit in JSFiddle

That’s all about loading and appending images to DOM in JavaScript and jQuery.