javascript - 解析为div innerHTML时form标签消失

Question

我有一个自制的 Web 后端，用户可以加载一些带有部分 HTML 代码的 XML 文件，并将其替换为网页内容，这几乎可以正常工作。

其中一个函数将读取的 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.

当我告诉页面向我显示代码时，它返回以下内容:

文档内容:

<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

发生这种情况的原因有多种。通常的嫌疑人是流浪者<form> <div id="TempDiv"> 之前的标签，或者也许在它周围。看看这个 fiddle 来理解我的意思。

发生这种情况是因为 HTML 解析器会纠正格式错误的 HTML。在解析过程中，解析器维护一个开放元素或未封闭标签的列表，并决定每个新元素要做什么。如您所知，嵌套 <form>不允许使用 s，这会触发称为 adoption agency algorithm 的东西。在解析阶段，它决定获取哪些元素 reparented这样 DOM 树就保持有效。

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>