Jquery克隆html中的元素

Question

这里我使用 jQuery ajax:

$.ajax({
    type: "GET",
    url: URL,
    data: { Mode: "POB1"},
    success: function (data) {
        var Html = $.trim($(data).find("#divpob").html());
        if (Html) {
            $(Html).find(".lblpob").text("UserName" + Username);
            $(".DivRprt").html(Html);
        }
    }
});

这里的lblpob值没有改变，但是如果我像这样使用.clone()

if (Html) {
    var Html2 = $(Html).clone(true);
    $(Html2).find(".lblpob").text("UserName" + Username);
    Html = Html2;
    $(".DivRprt").html(Html);
}

lblpob 已更改。

.clone() 这里有什么区别？

Answer 1

临时 DOM 对象和 html 作为字符串存在问题。我将逐行分解它:

您的第一个代码的作用:

    var Html = $.trim($(data).find("#divpob").html());

对 .html() 和 $.trim() 的调用都确保您的 Html var 包含一个 字符串，不是事件的 DOM 对象。

    $(Html) ...

这会将 Html 字符串转换为新 DOM 对象(您不会将其分配给 var)，

    ... .find(".lblpob").text("UserName" + Username);

并更改这个未命名的 DOM 对象。不是您的 Html 字符串。

    $(".DivRprt").html(Html);

但是这里你使用原来的Html字符串来改变DivRprt的html。

您的其他代码的作用:

    var Html2 = $(Html).clone(true);

创建新的 DOM 对象并克隆它后，将其分配给 Html2，

    $(Html2).find(".lblpob").text("UserName" + Username);

在这里你可以操纵它。

    Html = Html2;
    $(".DivRprt").html(Html);

所以在这里将操作的 DOM 对象插入 .DivRprt

我的选择:

您不需要 .clone()，只需跟踪第一个 DOM 对象即可:

    if (Html) {
        var Html2 = $(Html)
        Html2.find(".lblpob").text("UserName" + Username);
        $(".DivRprt").html(Html2);
    }

或者:

只是不要将修剪后的数据转换回字符串

    var Html = $(data).find("#divpob");
    if (Html.length) {
        Html.find(".lblpob").text("UserName" + Username);
        $(".DivRprt").html(Html);
    }