Das Formular-Tag verschwindet, wenn es zu divs innerem HTML geparst wird

Question

Ich habe ein selbst erstelltes Web-Backend, wo der Benutzer einige XML-Dateien mit partiellem HTML-Code laden und durch den Inhalt der Webseite ersetzen kann, was fast funktioniert.

Eine der Funktionen des gelesenen XML in einem temporären analysieren div versteckt mit innerHTML daran zu arbeiten, das Problem ist, dass der form Tag verschwindet in diesem proccess.

Dies ist die "kritische Teil":

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. 

Wenn ich die Seite sagte mir, es den Code zu zeigen, gibt diese:

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> 

und innerHTML- des TempDiv:

<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> 

Die Tags <form></form> sind vollständig verschwunden, und der Rest der Elemente wird als untergeordnete Elemente des Formulars erkannt.

Answer 1

Dies kann aus einer Reihe von Gründen geschehen. Der übliche Verdächtige wäre ein streunender <form> Tag vor der <div id="TempDiv"> oder vielleicht auch drumherum. Schau dir diese Geige an, um zu verstehen, was ich meine.

Dies geschieht aufgrund der Tatsache, dass HTML-Parser fehlerhafte HTML korrigieren. Während des Parsens verwaltet der Parser eine Liste offener Elemente oder nicht geschlossener Tags und entscheidet über jedes neue Element, was zu tun ist. Wie Sie wissen verschachtelte <form> s sind nicht erlaubt und dies löst während der Analysephase etwas namens adoption agency algorithm aus, das entscheidet, welche Elemente reparented erhalten, damit der DOM-Baum gültig bleibt.

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

Der Grund dafür ist wahrscheinlich, dass Ihr TempDiv bereits in einem <form> eingebettet ist, und dann wird die innere <form> verworfen wird, da Formulare nicht verschachtelt werden können.

Dieses Snippet zeigt den Unterschied, wenn Sie es ausführen. TempDiv1 befindet sich in einem <form> ist TempDiv2 nicht:

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>