时间戳

首页 > 解决方案 > 使用 jQuery 克隆、过滤和 plonk HTML 节点

javascript - 使用 jQuery 克隆、过滤和 plonk HTML 节点

问题描述

我尝试克隆 HTML 的子节点，过滤克隆并将其放在页面的其他位置。

我试试这个：

var emailTemplate = $("#email-post")[0];
$("#tempStoreEmailTemplate").val(emailTemplate.outerHTML);
$(tempStoreEmailTemplate).find('.num6:hidden').remove();
$("#iframe-textarea").val(tempStoreEmailTemplate.val)//.outerHTML

<div id="tempStoreEmailTemplate" hidden></div>

我在最后一行tempStoreEmailTemplate.val都试过了。显示此文本tempStoreEmailTemplate.outerHTML.outerHTML

<div id="tempStoreEmailTemplate" hidden=""></div>

.val什么都不显示。

预期的结果将是看到修改后的子节点的文本表示。你知道出了什么问题吗？

HTML 嵌套#email-post如下所示：

                <h4>Email Preview</h4>

                        <!-- Card -->
<!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" id="email-post">
   <head>

标签： javascripthtmljquery

解决方案

这可能与您存储临时块的方式有关 - 使用.val()将其放入 value 属性中，这在输入字段中很有用......在divs 中没有那么多。但是，如果您要附加临时块：

var emailTemplate = $("#email-post") //If you are using the ID tag correctly, this selector will only retrieve one element, you don't need to specify [0]
$("#tempStoreEmailTemplate").append($(emailTemplate))

它将匹配的整个子树的副本作为子#email-post元素放入匹配的元素#tempStoreEmailTemplate中；例如：

<div id="tempStoreEmailTemplate" hidden>
    <div id="email-post">
        ...
    </div>
</div>

这使您可以进行过滤：

$('#tempStoreEmailTemplate').find('.num6:hidden').remove();

然后将过滤后的 HTML 放入您的文本区域，您可以这样做：

$("#iframe-textarea").val($('#tempStoreEmailTemplate').html())

这会将以下内容放入您的文本区域：

<div id="email-post">
    ...
</div>

编辑添加：您可能必须更改隐藏方式#tempStoreEmailTemplate，如果当前解决方案不起作用，那么您可能必须将 div 更改为：

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

推荐阅读