別の入力の中に入力をネストする

Question

here（「許可されたコンテンツ」）とhere（「ヒントとノート」に記載）のように、input要素はDOMコンテンツを持つことが常に考えられます。

私はいくつかの異なる入力要素の種類がレンダリングされ、javascriptで変更されたプロジェクトで作業しています（例：プレーンinputテキスト要素とselect）。その変更プロセスでは、隠されたinputが、現在選択されている値を保持するこれらの要素の内部に配置されます。

だから、どうやらそれは別の入力要素（及び、その後、それを使用して）にinput要素を追加するjQueryのを介して可能である：

function doIt() { 
 
    //clear children of parent input 
 
    $('#parentInput').children().remove(); 
 

 
    //create new input and append it to the parent input 
 
    $('<input>').attr({ 
 
    type: 'hidden', 
 
    id: 'testInput', 
 
    value: 'Test value inserted into nested test input' 
 
    }).appendTo($('#parentInput')); 
 
    
 
    //get value of new nested input and write it to output div 
 
    $('#output').html($('#testInput').val()); 
 
} 
 

 
$('#doIt').on('click', doIt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="Test" id="parentInput"> 
 
<button id="doIt">Do it</button> 
 
<div id="output"></div>

かさえdiv：

function doIt() { 
 
    //clear children of parent input 
 
    $('#parentInput').children().remove(); 
 

 
    //create new input and append it to the parent input 
 
    $('<div id="testDiv">Test value inserted into nested test div</div>').appendTo($('#parentInput')); 
 
    
 
    //get value of new nested input and write it to output div 
 
    $('#output').html($('#testDiv').html()); 
 
} 
 

 
$('#doIt').on('click', doIt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="Test" id="parentInput"> 
 
<button id="doIt">Do it</button> 
 
<div id="output"></div>

私の質問は次のとおりです：inputの要素にDOMコンテンツが含まれていないと、なぜjQuery経由で（つまり、プレーンなjavascript経由で、jQueryが「単なる」ラッパーとして）可能性がありますか？

Answer 1

私はいつも（「許可コンテンツ」で）ここに述べたように、入力要素は、DOMの内容を持つのは禁止されていることを考えて、ここで（ 'ヒントとNotesの中）。

HTMLとDOMを混同します。 HTMLは単なるテキストです。 DOMはブラウザがそのテキストから作成するものです。

以下はHTMLです。それは無効だと何のブラウザは、それから、ネストされたノードを作成しません：

<input type="text" value="Test" id="parentInput"> 
    <div id="testDiv">Test value inserted into nested test div</div> 
</input> 

それは、このHTMLから来たように、ブラウザが作成するDOMツリーが最も可能性が高いになります。

<input type="text" value="Test" id="parentInput"> 
<div id="testDiv">Test value inserted into nested test div</div> 

終了タグは無視されます。 HTMLを解析する場合、ブラウザは寛容です。

DOMを直接操作した場合、ブラウザがそれを防ぐ理由はありません。 DOMをレンダリングするとき、ブラウザは入力をどのようにレンダリングするかを知っています。入力ノードに子ノードがあるかどうかは実際には気にしません。それは単に無視されます。

Answer 2

一部のブラウザは、W3C/HTML仕様で特にサポートされていない動作をサポートしている（またはサポートしていない）場合があります。一般に、これらの「機能」は、異なるブラウザ間で同じように動作しない可能性があります。あるいは、さらに悪いことに、ブラウザパッチが文書化されていないために動作を完全に変更する可能性があります。