JavaScript - check if html element should be closed using discrete tag

In this short article we would like to show how to check if some element should be closed or not in HTML. Presented examples use JavaScript and built-in DOM logic located inside Web Browsers. Below examples show how to make test for indicated tag name.

Quick solution:

// ONLINE-RUNNER:browser;

console.log('<img>' !== document.createElement('img').outerHTML); // false

false in output means that <img> element shouldn't be closed with </img>.

Full example

We can put testing logic inside reusable method.

// ONLINE-RUNNER:browser;

function hasClosing(tag) {
    try {
        var element = document.createElement(tag);
        return '<' + tag + '>' !== element.outerHTML;
    } catch (ex) {
        return false;
    }
}

// Usage example:

console.log(hasClosing('a'));    // true
console.log(hasClosing('img'));  // false
console.log(hasClosing('div'));  // true
console.log(hasClosing('p'));    // true
console.log(hasClosing('meta')); // false

With caching example

When we don't want to create each time elements, because of performace, we can use following code:

// ONLINE-RUNNER:browser;

var ElementUtils = new function() {
	var cache = { };
    function hasClosing(tag) {
        try {
            var element = document.createElement(tag);
            return '<' + tag + '>' !== element.outerHTML;
        } catch (ex) {
            return false;
        }
    }
	this.hasClosing = function(tag) {
    	var result = cache[tag];
      	if (result === undefined) {
        	result = cache[tag] = hasClosing(tag);
        }
      	return result;
    };
};


// Usage example:

console.log(ElementUtils.hasClosing('a'));    // true
console.log(ElementUtils.hasClosing('img'));  // false
console.log(ElementUtils.hasClosing('div'));  // true
console.log(ElementUtils.hasClosing('p'));    // true
console.log(ElementUtils.hasClosing('meta')); // false

With predefined cache example

In this example, previous case was extended with defined by default tag names as cache.

// ONLINE-RUNNER:browser;

var ElementUtils = new function() {
	var cache = {
    	'a':          true,
        'abbr':       true,
        'address':    true,
        'applet':     true,
        'area':       false,
        'article':    true,
        'aside':      true,
        'audio':      true,
        'b':          true,
        'base':       false,
        'basefont':   false,
        'bdi':        true,
        'bdo':        true,
        'blockquote': true,
        'body':       true,
        'br':         false,
        'button':     true,
        'canvas':     true,
        'caption':    true,
        'cite':       true,
        'code':       true,
        'col':        false,
        'colgroup':   true,
        'data':       true,
        'datalist':   true,
        'dd':         true,
        'del':        true,
        'details':    true,
        'dfn':        true,
        'dialog':     true,
        'dir':        true,
        'div':        true,
        'dl':         true,
        'dt':         true,
        'em':         true,
        'embed':      false,
        'fieldset':   true,
        'figcaption': true,
        'figure':     true,
        'font':       true,
        'footer':     true,
        'form':       true,
        'frame':      false,
        'frameset':   true,
        'h1':         true,
        'h2':         true,
        'h3':         true,
        'h4':         true,
        'h5':         true,
        'h6':         true,
        'head':       true,
        'header':     true,
        'hgroup':     true,
        'hr':         false,
        'html':       true,
        'i':          true,
        'iframe':     true,
        'img':        false,
        'input':      false,
        'ins':        true,
        'kbd':        true,
        'label':      true,
        'legend':     true,
        'li':         true,
        'link':       false,
        'main':       true,
        'map':        true,
        'mark':       true,
        'marquee':    true,
        'menu':       true,
        'meta':       false,
        'meter':      true,
        'nav':        true,
        'noscript':   true,
        'object':     true,
        'ol':         true,
        'optgroup':   true,
        'option':     true,
        'output':     true,
        'p':          true,
        'param':      false,
        'picture':    true,
        'pre':        true,
        'progress':   true,
        'q':          true,
        'rp':         true,
        'rt':         true,
        'ruby':       true,
        's':          true,
        'samp':       true,
        'script':     true,
        'section':    true,
        'select':     true,
        'slot':       true,
        'small':      true,
        'source':     false,
        'span':       true,
        'strong':     true,
        'style':      true,
        'sub':        true,
        'summary':    true,
        'sup':        true,
        'table':      true,
        'tbody':      true,
        'td':         true,
        'template':   true,
        'textarea':   true,
        'tfoot':      true,
        'th':         true,
        'thead':      true,
        'time':       true,
        'title':      true,
        'tr':         true,
        'track':      false,
        'u':          true,
        'ul':         true,
        'var':        true,
        'video':      true,
        'wbr':        false,
    };
    function hasClosing(tag) {
        try {
            var element = document.createElement(tag);
            return '<' + tag + '>' !== element.outerHTML;
        } catch (ex) {
            return false;
        }
    }
	this.hasClosing = function(tag) {
    	var result = cache[tag];
      	if (result === undefined) {
        	result = cache[tag] = hasClosing(tag);
        }
      	return result;
    };
};

// Usage example:

console.log(ElementUtils.hasClosing('a'));    // true
console.log(ElementUtils.hasClosing('img'));  // false
console.log(ElementUtils.hasClosing('div'));  // true
console.log(ElementUtils.hasClosing('p'));    // true
console.log(ElementUtils.hasClosing('meta')); // false