html要素が子ノードを追加できるかどうかをどのように検出しますか？

Question

自分のアプリケーションで「読み込み」というカスタムjqueryイベントを作成しました。私は、このイベントがトリガされたときに、スピンナでマスク要素を追加したいと思います。その部分を問題なく理解することができます。しかし、いくつかの要素（画像、フォーム入力など）は子要素を追加できません。このイベントのターゲットが子要素を受け取ることができるかどうかを検出できる必要があります。できない場合は、スピナー&マスクを親要素に追加します。

Answer 1

あなたが名前をチェックする必要があります：

/*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 
} 

Answer 2

You 子要素を追加すると、レンダリングされません。これは意味的な区別のように聞こえるかもしれませんが、あなたの問題にとっては重要です.DWはを知らない特定のタグがレンダリングされているかどうか。

あなたの最善の策は、単にマニュアルをチェックすることです：

var allowChildren = function(elem) { 
    return ! (elem.nodeName in { INPUT : true, IMG : true }) ; 
}; 

Answer 3

http://jsfiddle.net/mblase75/eGyRH/3/ - Chromeでは、表示されていなくても<input>タグに子要素を追加できます。これはDOMデバッガに表示され、ブラウザウィンドウには表示されません。

しかし、私はそれが.width()だテストすることができ、それがゼロかないに等しいです参照：http://jsfiddle.net/mblase75/eGyRH/4/

alert($('.element').append('<span>asdf</span>').children().width());​ 

しかし、これもゼロ幅になります例えば、私は隠しへのスパンを追加している場合などdiv：http://jsfiddle.net/mblase75/eGyRH/5/ - 完全には信頼できません。

Answer 4

受け入れられた回答は、​​に基づいて非常に素晴らしい機能を持っています。 jQueryのワンライナーで置き換えることができます。

node.is("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr")