如何將單擊的元素轉換爲textarea並返回？

Question

根據this JSFIDDLE發現在this SO answer我基本上試圖達到相同的，但是，我的元素不是div或不能只是一個<p>標記，基本上可以是任何元素，而下面的代碼假設它會是一個<p>標籤

我怎樣才能讓它回到原來的元素？

HTML

<p>If no background color...</p> 
<span>Element shortcut method for ...</span> 
<i>Element shortcut method which ...</i> 

JS

$(".modal-body div *").on("click", function(){ 
      divClicked(); 
    }); 
    function divClicked() { 
     var divHtml = $(this).html(); 
     var editableText = $("<textarea />"); 
     editableText.val(divHtml); 
     $(this).replaceWith(editableText); 
     editableText.focus(); 
     // setup the blur event for this new textarea 
     editableText.blur(editableTextBlurred); 
    } 

    function editableTextBlurred() { 
     var html = $(this).val(); 
     var viewableText = $("<p>"); <-- Could have been another tag 
     viewableText.html(html); 
     $(this).replaceWith(viewableText); 
     // setup the click event for this new div 
     viewableText.click(divClicked); 
    } 

Answer 1

爲什麼你不能使用CONTENTEDITABLE = 「真」 爲你的DIV？

<div contenteditable="true"> 
 
    This text can be edited by the user. 
 
</div>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content