如何用 Javascript 替换和附加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13670579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace and append with Javascript
提问by John Brunner
I have a comment system in which I want to realize inline-editing (when someone knows a good plugin or something similar please don't hesitate to give me a name) and found a Javascript snippet which replaces the text with a textarea and the text as the value of that textarea.
我有一个评论系统，我想在其中实现内联编辑（当有人知道一个好的插件或类似的东西时，请不要犹豫给我一个名字）并找到了一个 Javascript 片段，它用 textarea 和文本替换了文本作为该文本区域的值。
But now I need to add a button (submit button) to that textarea so that the user could save the text he edited.
但是现在我需要向该文本区域添加一个按钮（提交按钮），以便用户可以保存他编辑的文本。
My code looks now like
我的代码现在看起来像
<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>
I've tested it out with $("#name").append('<button>yes</button>');but it didn't work.
我已经测试过了，$("#name").append('<button>yes</button>');但没有用。
采纳答案by Miltos Kokkonidis
The solution can be tried out using the following jsFiddle: http://jsfiddle.net/adb8X/5/
可以使用以下 jsFiddle 尝试解决方案：http: //jsfiddle.net/adb8X/5/
The line I believe you are after is:
我相信你所追求的是：
$('<button>yes</button>').insertAfter("#name");
The code above inserts a newly created DOM element (yes) right after the DOM element with the specified id in the target selector ("#name").
上面的代码在目标选择器（“#name”）中具有指定 id 的 DOM 元素之后插入一个新创建的 DOM 元素（是）。
More about insertAfterhere: http://api.jquery.com/insertAfter/
更多关于insertAfter这里：http: //api.jquery.com/insertAfter/
If you want to insert it into replacetext(), it will become:
如果要将其插入到 中replacetext()，它将变为：
function replacetext() {
$("#name").replaceWith($('<textarea>').attr({
id: 'name',
value: $('#name').text()
}));
$('<button>yes</button>').insertAfter("#name");
}
Note: I also corrected your jsFiddle. Please check here: http://jsfiddle.net/adb8X/5/(There were problems with the settings and a small typo if I recall correctly). The corresponding line in that is:
注意：我还更正了您的 jsFiddle。请在这里查看：http: //jsfiddle.net/adb8X/5/（如果我没记错的话，设置有问题，还有一个小错字）。相应的行是：
$("#name").append( $('<button>hi</button>') );
回答by Wap
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.");
});
You can't use .append() in a textarea because you can't "insert content" or append to it (there are other workarounds for that). You can do that in DIV, paragraph tag, or whatever that can act as a container.
http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/or .on() http://api.jquery.com/on/
您不能在 textarea 中使用 .append() ，因为您不能“插入内容”或附加到它（还有其他解决方法）。你可以在 DIV、段落标签或任何可以充当容器的东西中做到这一点。
http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/或 .on() http://api.jquery.com /在/
回答by InspiredBy
Another option that will let you replace labels that are generated dynamically, not just the one with the static id = "Name" for example:
另一个选项可以让您替换动态生成的标签，而不仅仅是带有静态 id = "Name" 的标签，例如：
html for a label or an anchor link in this example to be replaced with textbox:
在此示例中将标签或锚链接的 html 替换为文本框：
<a href="#" onclick="editOpen(this);">@Html.DisplayFor(modelItem => Model.Name)</a>|
Javascript ( inside of the editOpenfunction)
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)));
}
回答by Aatif Farooq
Here is the working code.
这是工作代码。
<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>
Accept it as answer if it works
如果有效，请接受它作为答案
