javascript - 将文本区域更改为完成编辑后的元素

Question

我有以下代码：

var counter=0;
function appendText(){
    var text = $("#text").val();

    if ( $("#text").val() ){

    var textArea = "<div class='divex'> <textarea id='t"+counter+"'>"+text+"</textarea><button id='b"+
    counter+"'name='t"+counter+"' >edit</button> <button onClick='moveUp()' id='updiv'>Up:></button></div>";    
    $("#text").val();
    $("#addedText").after(textArea);
    $("#t"+counter).clear;    
    $("#t"+counter).attr('readonly','readonly');
    $("#b"+counter).bind('click',makeAreaEditable);
    $("#text").val('');

    counter++;
    }
    else{
    }   
};                                                                  

var makeAreaEditable = function()
{
    var target = event.target || event.srcElement || event.originalTarget;
    var button = $("#"+target.id);
    button.text("OK");
    button.unbind('click');
    button.bind('click',saveEdit);
    var targetArea = $("#"+target.name);
    targetArea.removeAttr('readonly');


};                                                      


var saveEdit =  function()
{
    var target = event.target || event.srcElement || event.originalTarget;
    var button = $("#"+target.id);
    button.text("edit");
    button.unbind('click');
    button.bind('click',makeAreaEditable);
    var targetArea = $("#"+target.name);
    targetArea.attr('readonly','readonly');

};

html 看起来像这样：

添加文字

    <div id="addedText" style="float:left">
    </div>

我想更改此脚本，以便：当我单击添加文本按钮时 - 当我单击确定时，文本将作为li元素添加，它将带来文本区域并保存回 li。谢谢！

我已经做到了！这是最终代码：

var makeAreaEditable = function()
{
    var liid = $(this).parent().find('li').attr('id');
    var text = $("#"+liid).html();
    var target = event.target || event.srcElement || event.originalTarget;
    var button = $("#"+target.id);
    button.text("OK");
    button.unbind('click');
    button.bind('click',saveEdit);
    var targetArea = $("#"+target.name);
    targetArea.replaceWith('<textarea>'+text+'</textarea>');    
};                                                      


var saveEdit =  function()
{
    var target = event.target || event.srcElement || event.originalTarget;
    var button = $("#"+target.id);
    var textarea = $(this).parent().find('textarea');
    var text = textarea.val();
    button.text("edit");
    button.unbind('click');
    var targetArea = button.parent().find('textarea');
    var textid = target.name;
    targetArea.replaceWith("<li id='"+textid+"' style='list-style-type:none;'>"+text+"</li>");
};