JavaScript – 测试元素是否可以包含文本

有没有一个干净和健壮的方式,我可以测试(使用纯 JavaScript或jQuery)如果HTML元素可以包含一些文本？

例如,< br>,< hr>或< tr>不能包含文本节点,而< div>,< td>或< span>能够.

测试此属性的最简单的方法是控制标签名称.但这是最好的解决方案吗？我认为这是最糟糕的

编辑：为了澄清问题的意义,需要指出的是,完美的答案应该考虑两个问题：

>根据HTML标准,元素可以包含文本节点吗？
>如果元素包含一些文本,会显示吗？

显然,前面列表的每个点都有一个子回答.

解决方法

The W3 standard for “void elements”规定：

Void elements
area,base,br,col,embed,hr,img,input,keygen,link,menuitem,Meta,param,source,track,wbr

显然还有一些unofficial标签.

您可以使用黑名单并使用.prop(‘tagName’)获取标签名称：

(function ($) {
    var cannotContainText = ['AREA','BASE','BR','COL','EMbed','HR','IMG','INPUT','KEYGEN','LINK','MENUITEM','Meta','ParaM','SOURCE','TRACK','WBR','BASEFONT','BGSOUND','FRAME','ISINDEX'];

    $.fn.canContainText = function() {
        var tagName = $(this).prop('tagName').toupperCase();

        return ($.inArray(tagName,cannotContainText) == -1);
    };
}(jQuery));

$('<br>').canContainText(); //false
$('<div>').canContainText(); //true

在这里,您还可以将自己的标签添加到cannotContainText(例如,添加< tr>,它不是正式的一个void元素,因为它不匹配specification“一个void元素是一个元素,其内容模型永远不允许它具有内容在任何情况下,虚空元素都可以有属性.“).