使用 jQuery 读取 div 内容会跳过 HTML、head 和 body 标签答案

【问题标题】：Reading div content usig jQuery skips HTML, head and body tags使用 jQuery 读取 div 内容会跳过 HTML、head 和 body 标签
【发布时间】：2017-01-23 18:53:26
【问题描述】：

我正在阅读一个 HTML 模板并将其从后面的服务器端代码添加到 div（我已设置 runat='server'）。这可以完美地呈现和显示页面上的 HTML。现在我在客户端更改呈现的 HTML 中的文本，并希望在服务器端读取更新的文本（div 内的完整 HTML）以更新模板。所以我采取了一个隐藏字段并在单击保存按钮时保存更新的 div 的 HTML。

$('#btnSaveTemplate').click(function () {
            $('#UpdatedEmailTemplate').val($('#divEmailBody').html());
});

HTML 模板：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>
        <strong><u>Database Decommission Notice – IMPORTANT NOTIFICATION</u></strong>
    </p>
    <p>
        <strong>FOLLOWING DATABASE(S) ARE SCHEDULED TO BE DECOMMISSIONED in 4 WEEKS from {SentDate};</strong>
    </p>
   
    <p>
        <strong>Why have you received this email?</strong>
    </p>
    <p>
        You are receiving this email as because you are an ITAO/ITAO delegate/CSM/CSM-1/key technical contact for database(s) that are scheduled to be decommissioned by 30. Below are the applications you have been identified.
    </p>
</body>
</html>

问题是当我尝试在单击保存时在隐藏字段中保存更改的 html 时，它给了我如下内容。（这是 $('#divEmailBody').html() 方法的输出）

\n\n\n    <title></title>\n\n\n    <p>\n        <strong>\n            <img style=\"width: 744px; height: 141px;\" alt=\"\" src=\"http://nyccgdbb0004.us.db.com/images/emailImmediateActionRequired.png\" border=\"0\">\n        </strong>\n    </p>\n    <p>\n        <strong><u>Database Decommission Notice – IMPORTANT NOTIFICATION</u></strong>\n    </p>\n    <p align=\"center\" class=\"MsoNormal\" style=\"margin: 0in 0.5in 6pt 0in; text-align: center;\">\n        <b>\n            <i>\n                <u>\n                    <span lang=\"EN-GB\" style=\"color: rgb(192, 0, 0); font-size: 14pt;\">Do not ignore this message</span>\n                </u>\n            </i>\n        </b>\n    </p>\n    <p>\n        <strong>FOLLOWING DATABASE(S) ARE SCHEDULED TO BE DECOMMISSIONED in 4 WEEKS from 1/23/2017;</strong>\n    </p>\n   \n    <p>\n        <strong>Why have you received this email?</strong>\n    </p>\n    <p>\n        <a title=\"\" class=\"editableText editable editable-pre-wrapped editable-click editable-unsaved\" href=\"#\" data-original-title=\"\" data-title=\"Update Text\" data-type=\"textarea\">You are receiving this email as because you are an ITAO/ITAO delegate/CSM/CSM-1/key technical contact for database(s) that are scheduled to be decommissioned by 30. Below are the applications you have been identified.test</a>\n    </p>\n\n\n\n"

如何阅读完整的 HTML？

【问题讨论】：

UpdateEmailTemplate 和 divEmailBody 在 DOM 中的什么位置？
您的错误已经出现在您尝试将 complete HTML 文档填充到 div 中的地步。那当然是无效的 HTML，所以浏览器会丢弃它在这种情况下无法理解的元素。

标签： javascript jquery html

【解决方案1】：

如果是模板，则不要将其添加到任何 html 元素中，例如 div.. 使用 script 标签代替。

<script id="UpdatedEmailTemplate" type="text/x-template">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>
        <strong><u>Database Decommission Notice – IMPORTANT NOTIFICATION</u></strong>
    </p>
</body>
</html>
</script>

如果您将模板附加到 div，它不会保持原样，浏览器会自行调整以使页面成为有效的 html。在一个页面中，您不能有两个 html 标签，因此浏览器会自动删除另一个标签。身体也一样。 HTML 从不抛出错误，但它自己修复错误。有时修复与我们想要的不同。这就是为什么它具有有效的 html 的原因

【讨论】：

【解决方案2】：

使用Javascript

var html = document.getElementsByTagName('html')[0];
var text = '<html>' + html.innerHTML + '</html/>';

使用 jQuery：

var text = '<html>' + $('html').html() + '</html/>';

【讨论】：