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

问题描述：

我有一个litle问题，我不知道如何解决它。jQuery更新html元素文本而不影响HTML子元素

我喜欢这里的一个

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

我喜欢做的是修改“名称在这儿”的HTML层次。

我有尝试是：

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

但也删除：

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

有没有一种方法来更新只有“名称在这儿”，而不影响span元素？

答

您可以通过访问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'; 
});

非常好！谢谢！几分钟后我会检查它的答案。 – 2011-12-22 15:29:27

答

两个可能的解决方案：

或者：换行文本在其自己的一个跨度：

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

...和更新：

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

或者：保留副本o f openClose范围并在更新文本后重新插入：

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

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

相关推荐