如何检测 html 元素是否可以追加子节点？

我在我的应用程序中创建了一个名为“loading”的自定义 jquery 事件。当触发此事件时，我想附加一个带有微调器的屏蔽元素。我可以毫无问题地弄清楚那部分。但是，某些元素（图像、表单输入等）无法附加子元素。我需要能够检测此事件的目标是否可以接收子元素。如果不能，那么我会将微调器和蒙版添加到它的父元素中。

您必须检查名称：

/*global $, jQuery */

function isVoid(el) {
    var tags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input',
                 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'],
        i = 0,
        l,
        name;

    if (el instanceof jQuery) {
        el = el[0];
    }

    name = el.nodeName.toLowerCase();

    for (i = 0, l = tags.length; i < l; i += 1) {
        if (tags[i] === name) {
            return true;
        }
    }
    return false;
}

并像这样使用它：

var el = document.getElementById('el'),
    elj = $('#el');

if (!isVoid(el)) {
    // append
}