Javascript 单击按钮将输入转换回div

我正在使用以下代码

 $(document).on('click', '#editDetailBtn', function () {

    var input = $('<input id="#detailprimaryDescription" type="text" />');
    input.val($('#detailprimaryDescription').text());
    $('#detailprimaryDescription').replaceWith(input);


    $('#editDetailBtn').hide();
    $('#detailPrimaryCancel').show();
    $('#detailPrimarySave').show();

});


$(document).on('click', '#detailPrimaryCancel', function () {


    var input = $('<div id="#detailprimaryDescription" ></div>');
    //input.val($('#detailprimaryDescription').text());
    $('#detailprimaryDescription').replaceWith(input);


        $('#editDetailBtn').show();
        $('#detailPrimaryCancel').hide();
        $('#detailPrimarySave').hide();

});

$（文档）.on（'click'，'editDetailBtn'，函数（）{
变量输入=$（''）；
input.val（$（'#detailprimaryDescription'）.text（）；
$（'#detailprimaryDescription'）。替换为（输入）；
$（'#editDetailBtn'）.hide（）；
$（'#detailPrimaryCancel'）.show（）；
$（'#detailPrimarySave'）.show（）；
});
$（文档）。在（'单击'，'详细信息PrimaryCancel'，函数（）上{
变量输入=$（''）；
//input.val（$（'#detailprimaryDescription'）.text（）；
$（'#detailprimaryDescription'）。替换为（输入）；
$（'#editDetailBtn'）.show（）；
$（'#detailPrimaryCancel'）.hide（）；
$（'#detailPrimarySave'）.hide（）；
});

我试图实现的是，一旦单击cancel，它就会将输入字段变回div

---

我想这就是你拍摄的目的

在dom中，不需要将“#”放在id的开头，它只用于引用元素

所以基本上，每个地方都有这样的东西：

var input = $('<input id="#detailprimaryDescription_input" type="text" />');

var input = $('<input id="detailprimaryDescription_input" type="text" />');

var输入=$（''）；

你应该这样做：

var input = $('<input id="#detailprimaryDescription_input" type="text" />');

var input = $('<input id="detailprimaryDescription_input" type="text" />');

var输入=$（''）；

一旦我把它清理干净，它就像在小提琴上一样工作

---

我想说的是，只显示和隐藏包含所有这些输入的div，而不是操纵DOM不断地创建/销毁它们，这将是一种更好的做法。

为什么要编写

var-input=

这么多次？