jQuery - 替换（文本）内容答案

【问题标题】：jQuery - replace (text) content [duplicate]jQuery - 替换（文本）内容
【发布时间】：2015-09-29 18:49:48
【问题描述】：

场景

我有以下 HTML 代码 sn-p:

<div class="container">
    TEXT
    <p> PARAGRAPH 1 </p>
    <p> PARAGRAPH 2 </p>
    <p> PARAGRAPH 3 </p>
    <p> PARAGRAPH 4 </p>
</div>

我需要使用 JS/jQuery 更改纯文本，使用 HTML DOM 方法。

问题

** 我可以使用

访问“纯文本”节点

document.getElementsByClassName("container")[0].childNodes[0]

** 但是，我不能使用innerHTML，因为它返回“undefined”：

document.getElementsByClassName("container")[0].childNodes[0].innerHTML

** 使用replaceChild 方法也不起作用（它会在控制台日志中触发Uncaught DOMException）。

    var textnode = document.createTextNode("THE TEXT HAS BEEN REPLACED");
    
    var element = document.getElementsByClassName("container")[0].childNodes[0];

    item.replaceChild(textnode, item);

** 最后，使用

document.getElementsByClassName("container")[0].innerHTML

选择<div class="container">中的所有HTML内容。

有什么方法可以访问“TEXT”的文本内容并动态更改它？

JSFIDDLE

http://jsfiddle.net/kouk/4otbqc75/

【问题讨论】：

我知道这样显示未格式化的纯文本是不好的做法，但我需要处理这种情况。如果可以的话，我会简单地添加一些 HTML 标签，但是，在这种情况下我别无选择。
使用textContent 而不是innerHTML。
您可以为此使用正则表达式。
提示：停止使用alert() 进行调试。 console.dir() 会强烈暗示要更改哪些属性。
哦，我是直接通过 Chrome 控制台调试我的代码的；我也应该在我的 jsfiddle 中放置 console.dir...感谢提示

标签： javascript jquery html dom frontend

【解决方案1】：

应该是

document.getElementsByClassName("container")[0].childNodes[0].textContent = "New Text";

【讨论】：

textContent 不应用于set，而应用于get 文本，因为它表示节点及其所有后代的文本内容。在此示例中，它作为节点 TEXT 没有子节点（但规则仍然有效）。

【解决方案2】：

就这样

Demo

$(".container").html($(".container:first-child").html().replace("TEXT","TEXT CHANGED"));

【讨论】：

如果我可以更改 HTML 文件，我会这样做；可悲的是，我无法更改该代码（我只能使用 JS/jQuery）
啊好的 2 分钟我给你一个解决方案
检查更新的答案

场景

问题

JSFIDDLE