Check if an element is closed using a discrete tag with JavaScript

Question

I am getting the child nodes of en element and i want to check if the tags can actually contain text. For example:

<br />, <img />

Should return false and

<span></span>, <div></div>, <li></li>

should return true. Thanks!

Answer 1

Unfortunately, there is no way to detect how a tag was written in the code, since when the JavaScript runs, the HTML code has already been parsed into DOM objects.

However, your question seems to be more about whether a particular element type can contain text. This simple test will give you an answer per element type:

function canElementContainText(tagname) {
    try {
        var e = document.createElement(tagname);
        return e.outerHTML.indexOf("/") != -1;
    } catch (ex) {
        return false;
    }
}

For instance canElementContainText("div") returns true and canElementContainText("img") returns false.

You can then pass the tagName property of any element to this function to test it.

var result = canElementContainText(myElement.tagName);

Answer 2

Following script works just fine (cross-browser issue resolved):

function containTxt(tag) {
    var tags = /^(img|video)$/i; // any values which will be in `tags` set will be treated as they can't have a text value
    return !tags.test(tag);
}

console.log(containTxt("img")); // returns false
console.log(containTxt("div")); // returns true