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元素？

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';
});

Answer 2

两种可能的解决方案：

要么：将文本换成自己的范围：

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

...并更新：

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

或：保留openClose范围的副本，并在更新文本后重新插入：

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

jQuery更新html元素文本而不影响HTML子元素

2 个答案: