Languages
[Edit]
EN

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

5 points
Created by:
Kate_C
2895

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 meand 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

 

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.