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

Question

我正在为一个网站用 Javascript 编写 Firefox(Greasemonkey)、Opera 和 Chrome 的浏览器插件。问题是，当我将 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>

...一。正如您所看到的，自关闭的 标签不再关闭， 标签也消失了。我用谷歌搜索了几乎所有的互联网，但我读到的解决方案都没有解决我的问题。

Answer 1

当获取 .innerHTML 时，在 Firefox 中会显示结束 标签。

我建议丢失的标签是由于您的标记造成的，我很确定该标记无效：

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

元素的父元素应该是 ，而不是

。

给定这个标记：

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

...Firefox 为我提供了 的 innerHTML：

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

    </tr>
</tbody>

它尝试纠正无效标记。

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

Answer 2

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

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

试试这个方法。