如何检测html元素是否可以追加子节点？
我在我的应用程序中创建了一个名为“loading”的自定义jquery事件。 当触发此事件时，我想要使用微调器附加一个masking元素。 我可以找出那个没有问题的部分。 但是，某些元素（图像，表单输入等）不能附加子元素。 我需要能够检测此事件的目标是否可以接收子元素。 如果不能，那么我将把微调器和蒙版添加到它的父元素。
你必须检查名称：
/*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 }
您可以添加子元素，它们只是不会渲染。 这可能听起来像语义上的区别，但它对您的问题至关重要：DOM不知道是否呈现特定标记。
你最好的选择就是检查手册：
var allowChildren = function(elem) { return ! (elem.nodeName in { INPUT : true, IMG : true }) ; };
http://jsfiddle.net/mblase75/eGyRH/3/ – Chrome允许我将一个子元素添加到标记，即使它根本没有显示。 它在DOM调试器中可见，而不是在浏览器窗口中。
但是，我可以测试它的.width()并看到它等于零： http ： //jsfiddle.net/mblase75/eGyRH/4/
alert($('.element').append('asdf').children().width());
但是，这也将是零宽度，例如，如果我将跨度添加到隐藏的div： http ： //jsfiddle.net/mblase75/eGyRH/5/ – 所以它也不是完全可靠的。
接受的答案具有非常好的function，基于哪些类型的节点可以是无效的 。 它可以被jQuery one-liner代替：
node.is("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr")