在div javascript中加载文本文件的内容以进行编辑

Question

我正在尝试通过将其加载到div中来编辑文本文件。将div更改加载到文本区域以进行编辑。 这是html代码：

<input type="button" value="view" onclick="load_file('let it go');"></input>
<input type="button" value="edit" onclick="edit_file('let it go');"></input>
<div class="content style" style="height: 300px; width: 300px"></div>

这是我的javascript函数，用于将文件加载到div

    function load_file(id){
            $.ajax({
                url : id+".txt",
                dataType: "text",
                success : function (data) {
                    $(".content").html(data);                 
                }
            });
        }

和我的javascript函数用于编辑文件

  function edit_file(id){
            divHtml = $(".content").html();
            divHtml = $.trim(divHtml);
            if(divHtml.length<=0){
                load_file(id);       
            }           
            $(".content").text();
            console.log(divHtml);
            var edit = $("<textarea class='content style'/>");
            edit.val(divHtml);
            $(".content").replaceWith(edit);
            edit.focus();
        }

当我点击查看按钮时，它工作正常。当第一次点击编辑按钮时它不起作用，但是当它第二次点击它时它正在工作。

任何人都能帮助我吗？我想在单击编辑按钮时首次显示要编辑的内容。