使用jQuery克隆过滤HTML节点并插入页面时取值异常如何解决

存在的问题 #

• 错误1：错误使用val()方法操作普通div元素：val()是input、textarea等表单元素专属的取值/赋值方法，<div id="tempStoreEmailTemplate">是普通DOM节点，不能用val()存储HTML内容，应该使用html()方法读写节点内的HTML。
• 错误2：未定义直接引用tempStoreEmailTemplate变量：代码中$(tempStoreEmailTemplate)没有加ID选择器标识，你没有单独声明过该变量，浏览器会识别为未定义变量，正确写法应该是$('#tempStoreEmailTemplate')。
• 错误3：取值方法错误：outerHTML返回的是当前节点本身+内部内容的完整字符串，所以你拿到的就是空的tempStore div标签；val()本身就不适用于div，自然返回空值。你需要的是修改后div内部的HTML内容，用.html()方法获取即可。

修正后的代码（兼容你原有写法） #

var emailTemplate = $("#email-post")[0];
// 用html()方法把克隆的HTML写入临时存储div
$("#tempStoreEmailTemplate").html(emailTemplate.outerHTML);
// 用正确的选择器选中临时div，删除隐藏的.num6节点
$("#tempStoreEmailTemplate").find('.num6:hidden').remove();
// 取出临时div内修改后的HTML内容，赋值给textarea
$("#iframe-textarea").val($("#tempStoreEmailTemplate").html());

更简洁的优化写法（不需要额外临时存储div） #

直接克隆原节点操作即可，省去额外DOM节点开销：

// 直接克隆原节点，不需要额外临时div
var clonedTemplate = $("#email-post").clone();
clonedTemplate.find('.num6:hidden').remove();
$("#iframe-textarea").val(clonedTemplate[0].outerHTML);

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