如何用Javascript替換和追加

Question

我有一個評論系統，我想在其中實現內聯編輯（當有人知道一個好的插件或類似的請不要猶豫，給我一個名字），並找到一個Javascript代碼段它用textarea替換文本，文本替換爲textarea的值。

但現在我需要添加一個按鈕（提交按鈕）到該textarea，以便用戶可以保存他編輯的文本。

我的代碼看起來像現在

<span id="name">comment</span> 

<div onclick="replacetext();">test</div> 

<script type="text/javascript"> 
    function replacetext(){ 
      $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() })); 
    </script> 

我已經測試了它與$("#name").append('<button>yes</button>');，但沒有奏效。

Answer 1

該解決方案可以使用以下的jsfiddle試驗一下：http://jsfiddle.net/adb8X/5/

行，我相信你追求的是：

$('<button>yes</button>').insertAfter("#name"); 

上面的代碼在DOM el之後插入一個新創建的DOM元素（是）在目標選擇器（「#name」）中使用指定的id。

更多insertAfter這裏：http://api.jquery.com/insertAfter/

如果你想將其插入到replacetext()，就會變成：

function replacetext() { 
    $("#name").replaceWith($('<textarea>').attr({ 
     id: 'name', 
     value: $('#name').text() 
    })); 

    $('<button>yes</button>').insertAfter("#name"); 

} 

---

注：我也糾正你的jsfiddle。請檢查這裏：http://jsfiddle.net/adb8X/5/（如果我正確記得，這些設置有問題，並有一個小的錯字）。在對應的線路是：

$("#name").append($('<button>hi</button>')); 

Answer 2

這是工作代碼。

<span id="name">comment</span> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<div onclick="replacetext();">test</div> 

<script type="text/javascript"> 
    function replacetext(){ 
      $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() })); 
      $('#name').after('<input type="submit" />'); 
    } 
    </script> 

接受這個答案，如果它的工作原理

Answer 3

function replacetext() { 

    $("#name").replaceWith($('<textarea>').attr({ 
     id: 'name', 
     value: $('#name').text() 
    })); 
    $('#name').after('<button id="test">test</button>'); 
} 

$('#test').live("click",function(){ 
    alert("I am a newly-created element and .click won't work on me."); 

}); 

不能使用.append（）在一個textarea的，因爲你不能「插入內容」或追加到它（還有其他解決方法）。你可以在DIV，段落標籤或任何可以充當容器的地方做到這一點。

http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/或。對（）http://api.jquery.com/on/

Answer 4

另一種選擇，可以讓您更換動態生成的標籤，只是一個不與靜態ID =「名稱」，例如：

的HTML標籤

<a href="#" onclick="editOpen(this);">@Html.DisplayFor(modelItem => Model.Name)</a>| 

的Javascript（該editOpen函數的內部）

function editOpen(ctrl) { 
    //textbox 
    var editText = $('<input>').attr({ 
     type: 'text', 
     value: $(ctrl).text() 
    }); 

    //edit button 
    var saveEditLink = $('<input>').attr({value:'Save',type:'button'}); 

    //Put them together 
    $(ctrl).replaceWith($(editText).after($(saveEditLink))); 

} 

：或在本例中的錨定鏈接，與文本框被替換