Is there a difference between `new Image()` and `document.createElement('img')`?

In javascript, I can do:

img1 = new Image();
img2 = document.createElement('img');

my question is, is there a difference between the two approach? I've read somewhere that Image, Form, and Element is called host objects, is this true? If it is, what are host objects?

Which approach is preferable?

I couldn't find any detailed reference but based on the comment in the MDC - HTMLImageElement example, it seems that Image is part of DOM level 0 whereas document.createElement is part of DOM level 2.

DOM level 0 was invented by Netscape and provided a way to access the certain elements of the website. Basically all browsers support it for backwards compatibility.
But to be honest, I don't understand why the Image constructor exists there, because, as far as I understood it, there was no way to manipulate the document with DOM level 0. Maybe it was only used internally by the browser to create the objects.

DOM level 2 is an official standard developed by the W3C.

For more information about the DOM levels, have a look at at quirksmode.org - Level 0 DOM and Wikipedia.

---

> I've read somewhere that Image, Form, and Element is called host objects, is this true?

Yes.

> If it is, what are host objects?

The ECMAScript specification motivates host objects this way:

> ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment. ECMAScript as defined here is not intended to be computationally self-sufficient; indeed, there are no provisions in this specification for input of external data or output of computed results. Instead, it is expected that the computational environment of an ECMAScript program will provide not only the objects and other facilities described in this specification but also certain environment-specific host objects, whose description and behaviour are beyond the scope of this specification except to indicate that they may provide certain properties that can be accessed and certain functions that can be called from an ECMAScript program.

and

> host object
object supplied by the host environment to complete the execution environment of ECMAScript.
NOTE Any object that is not native is a host object.

So any object that is not defined in the specification and provided by the environment is a host object. These are for example in a browser (among others): window, document and console.

Requirements:

In my team, we are building angular 5 application. The feature requirement was to preload images on component load, in order to reuse the them without loading again when needed in specific place in our Single Page Application.

1. img = new Image(); way:

We tried preloading images in DOM by create new Image() but when we reused the image src URL, the browser always reloaded the source file or checked if the header is modified (if cache enabled) which means preloading was sucessful but for every reuse, the roundtrip to server was made again.

2. img = document.createElement('img') way:

When we did the same with document.createElement('img') the image source was not reloaded, rather reused from local memory of the document and no extra request was made for the img src URL.

I do not really understand why, but this is a major difference that we discovered. In case anyone else needs to reuse the Preloaded images, the later would be the way to go to save some bandwith and few request roundtrips :)

The two lines are equivalent and both create HTMLImageElement object. The only difference is in XML document with mixed namespaces - new Image() always returns <img> element with XHTML namespace, document.createElement('img') doesn't always do this.

I personally would stick with createElement because then its not a special case to make an image everything is made the same way as they are identical I also noticed that jquery use appendChild(node) method for everything and I'm not sure of the difference between that and the two methods in your questions but jquery does work cross browser

I don't know what the technical difference should be, but I just fixed in IE8 bug by changing from new Image() to document.createElement('img') in the following code. In IE8, the onload callback never fired when using the Image constructor.

newImage = document.createElement('img');
//newImage = new Image();

newImage.onload = function () {
  callback(this.width, this.height);
};

newImage.src = image.src;

There are some significant differences between those two ways of creating images when you're working with Web Components. For example, if you use the document.createElement approach from within an imported HTML document (using <link rel="import" href="...">), then the image isn't actually loaded until it has been appended to the main document's DOM. See this SO question/answer for more details.