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[OK] をクリックするとテキストが要素として追加され、テキストエリアが表示され、保存時に 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>");
};