使用另一个关闭元素更改子元素中的文本答案

【问题标题】：Change a text in child with another closing element(s)使用另一个关闭元素更改子元素中的文本
【发布时间】：2013-04-03 08:28:52
【问题描述】：

示例 HTML：

<div>
    <input></input>
    Change me
</div>

如何将我的文本 Change me 更改为 Another text？
如何将Change me 之类的文本附加到Change me please

我知道只有我可以附加一些带有类似元素的文本..

var new_text = "<span>please</span>";
$(new_text).appendTo("div");

但是如果没有像<span> 这样的任何元素，我怎么能追加？

游乐场 + 测试在这里： http://jsfiddle.net/yU4Qj/

【问题讨论】：

标签： jquery string text append

【解决方案1】：

您可以遍历<div> 的.contents()，直到找到所需的文本节点，然后您可以通过更改其.nodeValue 属性来修改其内容。

$('div').contents().each(function() {
    if (this.nodeType === 3 && this.nodeValue.match(/Change/)) {
        this.nodeValue = "I've been changed!";
    }
});

不过，更好的解决方案是将原始文本节点包装在 <span> 中，以便您可以通过 DOM 选择器直接访问它。您可以在第一次加载页面时自动执行该包装（即使用 JS 代码，而不是通过更改源代码），然后使用普通的 jQuery 选择器和方法。

【讨论】：

展开关于 .contents() vs .html() pls :D 看看@Reigel's anwser 看起来更容易
.contents() 让您可以直接访问本机 DOM 节点，但与其他 jQuery 方法不同的是，它为您提供文本节点以及元素，并允许您直接修改这些文本节点。请参阅 Reigel 关于为什么使用 .html() 是一个坏主意的回答中的 cmets。
谢谢，并附上我喜欢这个jsfiddle.net/yU4Qj/3你能看看这个，没关系吗？

【解决方案2】：

$('div').contents().filter(function() {; return this.nodeType == 3; }).replaceWith('I have changed')

【讨论】：

【解决方案3】：

有很多方法可以实现它... 一种方法是……

var new_text = "please";
$('div').html(function(i,h){
return h + new_text;
});

demo

【讨论】：

不错，所以我可以return h.replace("Change me", "New text"); 来编辑我的文字
不，这不是一个不错的。它依赖于序列化现有的 DOM，修改字符串，然后再次反序列化。这将破坏附加到这些节点的任何事件处理程序或数据。
哦，原来如此！谢谢@Alnitak
如果你使用 .live() / delegate .on() 没关系，但恕我直言 .html() 应该只用于创建新节点，而不是修改它们。序列化然后反序列化 HTML 几乎从来都不是正确的答案。
没有更多 .live() 在 1.9 版上...是的 .on() 应该可以工作...但您仍然应该小心...其他使用的插件可能无法工作...