Chrome 删除 .innerHTML 插入中的表单标签答案

【问题标题】：Chrome removes form tag in .innerHTML insertChrome 删除 .innerHTML 插入中的表单标签
【发布时间】：2012-09-26 14:07:10
【问题描述】：

我有一些扩展我的 .net 应用程序的 mvc 框架。他们的任务主要是为 .net 应用程序界面提供部分内容。

有趣的是，镀铬去除了非常必要的

这是我从框架中获取和呈现数据的方式

$.ajax({
    url: "/mvc/UserProfile/AddressForm?datatype=shipping",
    dataType: "text", // text html script
    method: "get",
    cache: false,
    success: function (data) {

        console.log(data);

        //var userProfileAdd = document.getElementById("userProfileAdd");
        var userProfileAdd = $("#userProfileAdd")[0];
        userProfileAdd.innerHTML = "<div>" + data + "</div>";
    }
});

Firefox、IE 等确实会检索所有数据。有谁知道为什么 chrome 会这样？

谢谢

编辑

这是发送到console.log打印的数据变量的代码

<script src="/scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

<form OnSubmit="return false;" action="/mvc/UserProfile/AddressFormPost" id="frmUserAddress" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>
<input name="__RequestVerificationToken" type="hidden" value="8Vkd039Wc3825G6CTEomJ/aXfrCyjuEY3sV/ty4znHi9yO0Th535p8VNxqvBwhJ12AREQhvTMhRVNEO6Ke3O87jDAjREg3I3dFYp2Y5geutbEOLk6KHmn6hLb4a5CFaZ3uCOm8uYgr/U4au33yaUFw==" />


<div>
    Select country:
    <select id="Countries" name="Countries"><option value="029">Caribbean</option>
        <option value="AE">U.A.E.</option>
        <option value="AF">Afghanistan</option>
        <option value="AL">Albania</option>
        <option value="AM">Armenia</option>
        <option value="AR">Argentina</option>
    </select>
</div>

<div>
    Postal Code
    <input class="formField textBox" id="PostalCode" name="PostalCode" type="text" value="" />
    <span class="field-validation-valid" id="PostalCode_validationMessage"></span>
</div>


<div>
    City
    <input class="formField textBox" id="City" name="City" type="text" value="" />
    <span class="field-validation-valid" id="City_validationMessage"></span>
</div>

<div>
    State
    <input class="formField textBox" id="State" name="State" type="text" value="" />
    <span class="field-validation-valid" id="State_validationMessage"></span>
</div>


<div>
    First name
    <input class="formField textBox" id="FirstName" name="FirstName" type="text" value="" />
    <span class="field-validation-valid" id="FirstName_validationMessage"></span>
</div>

<div>
    Email
    <input class="formField textBox" id="Email" name="Email" type="text" value="" />
    <span class="field-validation-valid" id="Email_validationMessage"></span>
</div>
<div>
    <input type="submit" value="Send!" id="btnAddressForm" class="button" />
</div>

</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"PostalCode","ReplaceValidationMessageContents":true,"ValidationMessageId":"PostalCode_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your postal code","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"City","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your city","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"State","ReplaceValidationMessageContents":true,"ValidationMessageId":"State_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your state","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Email","ReplaceValidationMessageContents":true,"ValidationMessageId":"Email_validationMessage","ValidationRules":[{"ErrorMessage":"Please enter your first name","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"frmUserAddress","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>

【问题讨论】：

您是否有包含此代码的在线示例页面？这样我们就可以测试您的代码。可能您发布的 html 无效？
能不能把userProfileAdd的内容也贴一下。
userProfileAdd 只是一个空的 div，我在其中放置内容

标签： ajax jquery asp.net-ajax

【解决方案1】：

如果周围有表单元素，Chrome 会删除表单元素。只是表单标签消失了，它的所有内容都保留了。

检查以确保作为表单的“userProfileAdd”没有父节点。

【讨论】：

有趣的是，如果我一次粘贴多个表单（使用jQuery.html()），它只会删除第一个表单标签。
就像@Leksat 所说：这似乎是一个错误的行为，直到今天仍然如此。