如何用 Javascript 替换和追加

Posted 2023-03-11

【中文标题】如何用 Javascript 替换和追加

【英文标题】：How to replace and append with Javascript

【发布时间】：2012-11-20 04:06:01

【问题描述】：

我有一个评论系统，我想在其中实现内联编辑（当有人知道一个好的插件或类似的东西时，请不要犹豫给我一个名字）并找到一个 javascript sn-p 将文本替换为一个 textarea 和 text 作为该 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>'); 对其进行了测试，但没有成功。

【问题讨论】：

除了您的示例中缺少 之外，它在 jsfiddle.net/j08691/adb8X 处工作正常

谢谢，但是添加一个额外的按钮需要什么代码？ jsfiddle.net/ZaEDw 不工作

更好的方法是使用.show() 和.hide() 来显示TEXTAREA 而不是DIV。或者，在 BODY 上设置一个类名来控制页面上各种元素的显示，然后设置这个类。

更正了您的 jsFiddle：jsfiddle.net/adb8X/5

@MiltiadisKokkonidis 谢谢！

【参考方案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>') );

【参考方案2】：

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() ，因为您不能“插入内容”或附加到它（还有其他解决方法）。您可以在 DIV、段落标记或任何可以充当容器的内容中执行此操作。http://api.jquery.com/append/http://api.jquery.com/after/http://api.jquery.com/live/ 或 .on() http://api.jquery.com/on/

【参考方案3】：

这是工作代码。

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

如果可行，请接受它作为答案

【参考方案4】：

另一个选项可以让您替换动态生成的标签，而不仅仅是带有静态 id = "Name" 的标签，例如：

此示例中的标签或锚链接的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)));

【讨论】：

非常感谢您的回答非常有趣（也适用于未来的项目）。