为何TextArea中仅显示[object HTMLDivElement]而不展示HTML内容？

核心错误点 #

• 直接将DOM对象tempStoreEmailTemplate传入textarea的val()方法，浏览器会将DOM对象自动转为字符串[object HTMLDivElement]，这就是你看到异常输出的直接原因
• jQuery对象没有outerHTML属性，只有原生DOM对象才有该属性，原代码中$(emailTemplate).outerHTML取值为undefined，写入临时容器的内容本身就不完整
• 读取临时容器内容时没有正确调用属性/方法拿到字符串格式的HTML源码

前置要求 #

确保你的页面上存在隐藏的临时存储容器：

<div id="tempStoreEmailTemplate" style="display: none;"></div>

修正后的代码 #

// 1. 读取原始邮件模板的完整HTML字符串
const originTemplate = $("#email-post")[0].outerHTML;
// 2. 将模板写入临时存储容器
const $tempContainer = $("#tempStoreEmailTemplate");
$tempContainer.html(originTemplate);
// 3. 移除不需要的隐藏元素
$tempContainer.find('.num6:hidden').remove();
// 4. 读取处理后的HTML字符串，赋值给textarea
$("#iframe-textarea").val($tempContainer.html());

特殊情况处理 #

如果你的嵌套<html>标签被浏览器自动过滤（因为浏览器不允许HTML页面嵌套html/head/body标签），可以将原始模板放在不被解析的模板标签中存储：

<script type="text/template" id="email-post">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!-- 你的完整邮件模板代码 -->
</html>
</script>

这种场景下读取原始模板的代码改为：

const originTemplate = $("#email-post").html();

内容的提问来源于stack exchange，提问作者János