按下Esc按鈕后恢復為原始HTML

Question

我通過javascript修改了html，我希望當我單擊esc時，它將返回到html的原始形式：

if ($("#div").show()) {
    $("#div1").empty();
    $("#div1").html("<input class='tabledit-input form-control' type='text' value='" + file[0].name + "'>");

    $("#div2").empty();
    $("#div2").html("<input type='text' class='form-control' placeholder='div2'>");

    $("#div3").empty();
    $("#div3").html("<input type='text' class='form-control' placeholder='div3'>");
} else if (e.keyCode == 27) {
    //what to do here?
}

Answer 1

您可以使用.clone()方法復制事件發生之前的原始副本：

//#################  clone them here ######################

var d1 = $("#div1").clone(),
    d2 = $("#div2").clone(),
    d3 = $("#div3").clone();

現在，您可以將它們替換為：

if ($("#div").show()) {
    $("#div1").empty();
    $("#div1").html("<input class='tabledit-input form-control' type='text' value='" + file[0].name + "'>");

    $("#div2").empty();
    $("#div2").html("<input type='text' class='form-control' placeholder='div2'>");

    $("#div3").empty();
    $("#div3").html("<input type='text' class='form-control' placeholder='div3'>");
} else if (e.keyCode == 27) {
    //################# now replace it here. ####################
    $('#div1').replaceWith(d1);
    $('#div2').replaceWith(d2);
    $('#div3').replaceWith(d3);
}