Javascript 中 document.innerHTML 的自动关闭标签问题答案

【问题标题】：Self-Closing Tag Issue with document.innerHTML in JavascriptJavascript 中 document.innerHTML 的自动关闭标签问题
【发布时间】：2011-09-13 22:37:33
【问题描述】：

我正在为一个网站编写一个用于 Firefox(Greasemonkey)、Opera 和 Chrome 的 Javascript 浏览器插件。问题是，当我将document.innerHTML 加载到变量中时，

<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
&nbsp;</td>
</form>

...网站上面的原始代码（我正在为其编写插件）转换为

<form name="foo" action="foo.php" method="get">
<td id="td">text:
**<input name="k" type="text">**
&nbsp;</td>

...这个。可以看到，自动关闭的<input /> 标签不再关闭，</form> 标签也消失了。我搜索了几乎所有的互联网，但我阅读的所有解决方案都没有解决我的问题。

【问题讨论】：

据我所知，没有办法以这种方式获取原始页面源（或者至少可以保证工作）。当您请求 innerHTML 时，浏览器将为您提供 DOM 元素内容的 HTML 序列化。通过 XMLHTTPRequest 加载页面会起作用，尽管这可能不是您想要的。
为什么会出现问题？浏览器如何选择将元素表示为 HTML 标记不应该真正影响任何事情。 <input> 元素的本质是它没有后代。缺少/> 并没有改变这一点。
<input> 标签在 HTML 中不必关闭，事实上在 HTML 中自关闭标签在语法上是不正确的。
实际上问题是因为消失了，当我在输入中输入内容并按 enter 时，表单无法正常工作。

标签： javascript html tags innerhtml

【解决方案1】：

当我收到.innerHTML 时，我在 Firefox 中会显示结束的 </form> 标签。

我建议缺少标签是由于您的标记，我很确定它是无效的：

  <!-- A <form> wrapping a <td> ? -->
<form name="foo" action="foo.php" method="get">
    <td id="td">text:
        <input name="k" type="text" />
        &nbsp;
    </td>
</form>

<td> 元素的父元素应该是 <tr>，而不是 <form>。

鉴于此标记：

<table>
    <tr>
        <form name="foo" action="foo.php" method="get">
            <td id="td">text:
                <input name="k" type="text" />
                &nbsp;
            </td>
        </form>
    </tr>
</table>

...Firefox 给我这个innerHTML 用于<table>：

<tbody>
    <tr>
        <form name="foo" action="foo.php" method="get"></form>
            <td id="td">text:
                <input name="k" type="text">
                &nbsp;
            </td>

    </tr>
</tbody>

它尝试更正无效标记。

演示： http://jsfiddle.net/grM4c/

【讨论】：

我在第一篇文章中部分粘贴了代码，当然上面还有<tr>。但正如我从您的消息中了解到的那样，在放置<td> 之前，总是必须有一个<tr>，对吧？而且正如我上面提到的，我正在为网站编写第三方插件，我不是管理员，所以我无法更改原始代码。我正在尝试在 javascript 中找到一种方法来做到这一点。
好的，看看这个，jsfiddle.net/UQ4jj Opera 和 Firefox 都给出了相同的输出。顺便说一句，HTML部分是网站的原始代码（除了开头的表格标签，最后我保留了它们用于javascript部分），与我第一篇文章中的代码不同。
@Nail：是的，同样的问题。标记无效。您永远不能依赖无效的 HTML 标记。如果站点有<table><form><td>，那么站点编码不正确，需要管理员修复。即使您以某种方式找到了适用于当前呈现的 JavaScript 解决方案，Firefox 也可能会在其下一个版本中更改其呈现无效标记的方式，从而导致您最初的修复失败。
无论如何，非常感谢你，顺便说一句，我正在尝试通过丑陋的方法解决这个问题，即使用 replace() 更改 innerHTML 的内容。我将自己添加所需的</form> 标签。对您的编辑的回应：是的，您是对的，但目前没有其他方法可以解决此问题，因为我无法联系到管理员，如果 Firefox 更改了渲染，这意味着我也将更改我的 Javascript 代码。

【解决方案2】：

好吧，看看你的代码，你会关心创建一个中间有一个未闭合的 TD 的表单。

<form name="foo" action="foo.php" method="get">
<td id="td"><span>text:<input name="k" type="text" /></span></td>
</form>

试试这个方法。

【讨论】：

问题代码中的<td>确实有一个对应的结束标签。它应该是<tr> 的子代而不是<form>，但它已关闭。
是的@nnnnnn 是对的，而且我正在为我不是管理员的网站编写第三方扩展。因此，我无法更改 html 部分，所以这意味着我必须在 Javascript 中找到解决方案。
对@nnnnn，我看到了一些错误，但我没有编写代码。