divの内側のHTMLに解析されたときにフォームタグが消える

Question

私は部分的なHTMLコードでXMLファイルを読み込み、それをほぼ正常に動作するウェブページのコンテンツで置き換える自作のWebバックエンドを使用しています。

読み取ったXMLを解析して、一時的に非表示にしたdivをinnerHTMLで処理すると、formタグがこのプロセスで消えてしまうという問題があります。

これは、 "重要な部分" である：

var DocContent; // This var will have the HTML code (the XML document content) withount modifications 
// ... 
document.getElementById("TempDiv").innerHTML = DocContent; // This is the part where the code is parsed. 

私は私のコードを表示するページを告げたとき、それはこれらを返します。

DocContent：

<p> 
    <span lang='en'>This form</span> 
</p> 
<form action='./contact.php' method='POST'> 
    <label for='Name'> 
     <span lang='en'>Full Name</span> 
    </label> 
    <input id='Name' type='text' name='Name' maxlength='50' required> 
    <hr> 
    <button id='Submitter' type='submit'> 
     <span lang='en'>Send</span> 
    </button> 
</form> 
<p> 
    <span lang='en'>blah blah</span> 
</p> 

とTempDivのinnerHTMLプロパティを：

<p> 
    <span lang='en'>This form</span> 
</p> 

    <label for='Name'> 
     <span lang='en'>Full Name</span> 
    </label> 
    <input id='Name' type='text' name='Name' maxlength='50' required> 
    <hr> 
    <button id='Submitter' type='submit'> 
     <span lang='en'>Send</span> 
    </button> 

<p> 
    <span lang='en'>blah blah</span> 
</p> 

<form></form>タグが完全になくなり、残りの要素はフォームの親の子として認識されます。

Answer 1

これは、さまざまな理由で発生します。通常の容疑者は、<div id="TempDiv">の前に迷いのある<form>タグ、またはその周辺にある可能性があります。私が意味するものを理解するために、このフィドルをチェックしてください。

これは、HTMLパーサーが不正な形式のHTMLを修正するという事実が原因です。解析中、パーサは開いている要素のリスト、または閉じられていないタグのリストを保持し、新しい要素ごとに何をするかを決定します。あなたが知っている通り、<form>はネストされていません。これは、DOMツリーが有効になるようにどの要素がreparentedになるかを決定する構文解析フェーズ中にadoption agency algorithmと呼ばれるものをトリガします。

var content = "\ 
 
<p><span lang='en'>This form</span></p>\ 
 
<form action='./contact.php' method='POST'>\ 
 
    <label for='Name'>\ 
 
     <span lang='en'>Full Name</span>\ 
 
    </label>\ 
 
    <input id='Name' type='text' name='Name' maxlength='50' required>\ 
 
    <hr>\ 
 
    <button id='Submitter' type='submit'>\ 
 
     <span lang='en'>Send</span>\ 
 
    </button>\ 
 
</form>\ 
 
<p><span lang='en'>blah blah</span></p>" 
 

 
document.getElementById("temp").innerHTML = content;

<form> 
 
<div id="temp"> </div>

Answer 2

の理由は、あなたのTempDivがすでに<form>に埋め込まれている可能性が最も高い、とフォームが入れ子にすることができないので、その後、内側<form>は破棄されます。

このスニペットは、実行するとその違いを表示します。 TempDiv1が<form>内にある、TempDiv2ではありません。

var DocContent = 
 
    "<p>\r\n" + 
 
    " <span lang='en'>This form</span>\r\n" + 
 
    "</p>\r\n" + 
 
    "<form action='./contact.php' method='POST'>\r\n" + 
 
    " <label for='Name'>\r\n" + 
 
    "  <span lang='en'>Full Name</span>\r\n" + 
 
    " </label>\r\n" + 
 
    " <input id='Name' type='text' name='Name' maxlength='50' required>\r\n" + 
 
    " <hr>\r\n" + 
 
    " <button id='Submitter' type='submit'>\r\n" + 
 
    "  <span lang='en'>Send</span>\r\n" + 
 
    " </button>\r\n" + 
 
    "</form>\r\n" + 
 
    "<p>\r\n" + 
 
    " <span lang='en'>blah blah</span>\r\n" + 
 
    "</p>"; 
 

 
document.getElementById("TempDiv1").innerHTML = DocContent; 
 
document.getElementById("TempDiv2").innerHTML = DocContent; 
 
console.log("TempDiv1.innerHTML = " + document.getElementById("TempDiv1").innerHTML); 
 
console.log("TempDiv2.innerHTML = " + document.getElementById("TempDiv2").innerHTML);

<div style="float:left; background:#eef"> 
 
    <form> 
 
    <div id="TempDiv1"></div> 
 
    </form> 
 
</div> 
 

 
<div style="float:left; background:#fee"> 
 
    <div id="TempDiv2"></div> 
 
</div>