如何使用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");

上面的代码在目标选择器（“#name”）中具有指定 id 的 DOM 元素之后插入一个新创建的 DOM 元素（是）。

更多关于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>') );