使用jQuery更新HTML元素文本，而不影响HTML子元素

Question

我有一个小问题，不知道该如何解决。

我有一个类似于这里的HTML层次结构。

<ul id="mylist">
    <li id="el_01">
        <div class="title">
            Title Goes Here
            <span class="openClose"></span>
        </div>
    </li>
</ul>

我喜欢做的是修改“Title Goes Here”。

我尝试过的是：

$('#el_01 title').text('New Title Goes Here');

但这也会去掉冒号：

<span class="openClose"></span>

有没有一种方法可以仅更新“Title Goes Here”而不影响 span 元素？

- KodeFor.Me

Answer 1

您可以通过访问DOM元素并获取其firstChild来直接编辑文本节点。

$('#el_01 .title')[0].firstChild.data = 'New Title Goes Here';

如果有多个.title元素，您可以在.each()循环中执行此操作。

$('#el_01 .title').each(function(i,el) {
    el.firstChild.data = 'New Title Goes Here';
});

- user1106925

---

非常好！谢谢！我会在几分钟后将其作为答案检查。 - KodeFor.Me

Answer 2

有两种可能的解决方案：

方法一: 将文本包装在它自己的 span 元素中：

<div class="title">
    <span class="text">Title Goes Here</span>
    <span class="openClose"></span>
</div>

...并更新：

$('#el_01 .text').text('New Title Goes Here');

或者: 保留 openClose span 的副本，在更新文本后重新插入:

var openClose = $('#el_01 .title .openClose');
$('#el_01 .title').text('New Title Goes Here').append(openClose);

- Peter-Paul van Gemerden