html中的jquery克隆元素

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()确保你的Htmlvar包含一个字符串,而不是一个实时DOM对象.

    $(Html) ...

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

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

并更改此未命名的DOM对象.不是你的Html字符串.

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

但是在这里你使用原始Html字符串来改变html DivRprt.

你的其他代码做了什么:

    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);
    }