如何用Javascript替换和附加

我有一个评论系统，我想在其中实现内联编辑（当有人知道一个好的插件或类似的东西时，请不要犹豫给我一个名字），并找到一个Javascript代码段，它用一个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>

注释
测试
函数replacetext（）{
$（“#name”）.replacetwith（$（''）.attr（{id:'name'，value:$（'#name'）.text（））；

---

我已经用

$（“#name”）.append（'yes'）；

对它进行了测试，但它不起作用。

下面是工作代码

<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>

注释
测试
函数replacetext（）{
$（“#name”）.replacetwith（$（''）.attr（{id:'name'，value:$（'#name'）.text（））；
$（'#name'）。在（''）之后；
}

如果有效，则将其作为答案接受

函数replacetext（）{
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.");

});

$（“#名称”）.replace为（$（''）.attr({
id:'名称'，
值：$（“#名称”）.text（）
}));
$（'#name'）。在（'test'）之后；
}
$（“#测试”）.live（“单击”，函数（）{
警报（“我是一个新创建的元素，单击对我无效。”）；
});

您不能在文本区域中使用.append（），因为您不能“插入内容”或向其追加内容（还有其他解决方法）。您可以在DIV、段落标记或任何可以用作容器的内容中执行此操作。

---

或者.on（）

可以使用以下JSFIDLE尝试解决方案：

我相信你的目标是：

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

---

注意：我还更正了您的JSFIDLE。请检查这里：（如果我没记错的话，设置有问题，还有一个小的打字错误）。其中对应的一行是：

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

$（“#name”）.append（$（'hi'）；

另一个选项将允许您替换动态生成的标签，而不仅仅是静态id=“Name”标签，例如：

本例中标签或锚定链接的html将替换为文本框：

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

---

除了示例中缺少的

}

之外，它在这里工作得很好，谢谢，但是添加额外按钮需要什么代码？不起作用更好的方法是使用

.show（）

和

.hide（）

来显示文本区域而不是DIV。或者，在正文上有一个类名来控制页面上各种元素的显示，然后设置这个类。更正了您的JSFIDLE:@MiltiadisKokkonidis谢谢！非常感谢您的回答，这非常有趣（也适用于未来的项目）。

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

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)));

}