Question

一个简单的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="jquery-2.1.4.js"></script>
</head>
<body>
    <form id="f1">
    </form>
    <script>
        $('#f1').html(
            '<div id="outer">' +
                '<form id="f2">' +
                    '<div id="inner"></div>' +
                '</form>' +
            '</div>'
        );
    </script>
</body>
</html>

如果我们在浏览器中打开此页面，我们将看不到#f2表单。为什么会被删除？

我知道嵌套表单根据标准无效，但在项目中我正在处理表单中的表单有时是有效的，我无法弄清楚差异（在这两种情况下，表单都是通过.html()）。

我也试过innerHTML，但结果是一样的。

Answer 1

您遇到了未定义的行为。

Quoted from MDN

注意：严格禁止在其他表单中嵌套表单。嵌套可能导致表单根据正在使用的浏览器以不可预测的方式运行。

Answer 2

浏览器会自动从代码中删除嵌套表单，以调整它以符合有效标准。

Answer 3

您无法在form标记内添加form，尝试将form替换为div

＆＃13;

$('#f1').html(
    '<div id="outer">' +
        '<form id="f2">' +
            '<div id="inner">Inner Div</div>' +
        '</form>' +
    '</div>'
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="jquery-2.1.4.js"></script>
</head>
<body>
    <div id="f1">
    </div>
    
</body>
</html>

＆＃13;

为什么没有<form>插入？

3 个答案: