Search code examples
javascriptelementimageterminationcreateelement

Creating img element and appending to dom has no termination

I've got a pretty complicated DOM structure already and I'd like to eliminate the possibility of unterminated image elements causing issues.

Looking at the simplest case:

var prettyPicture = document.createElement("img");
//Add properties...
container.appendChild(prettyPicture );

Works fine, but when I insepct the dom I see the img element without a terminating slash such as <img/>

<img id="iamge-6816177" src="_site/images/detail/6816177.png">

No issues in the simple layout view, but when I look at a view with tons of these elements, random ones, even similar images within the same parent nodes do not render, though their nodes are in the dom inspector. Would missing termination cause any issues with the tree?

Solution

  • The closing tag of an img element is entirely optional - this won't cause you problems in any browser. So much so, in fact, that in HTML5 you're now not supposed to include the /> in img elements at all.

    Also, what you see when you inspect the DOM is just how your inspector chooses to display elements with no closing tag - you can be sure that createElement() and appendChild() are generating valid HTML, as you're working directly with the DOM rather than providing text for the browser to parse into DOM objects.