更新 HTML 元素中的文本而不删除其他元素（仅限 jQuery）

Question

怎么做？ 我知道有解决方案，但我想知道 jQuery 是否提供了一个 jQuery only 解决方案，没有原生 Javascript 函数来执行以下操作。

什么？ 假设我们有以下 HTML，并且我们想用“testDiv”类更改 div 的文本。我知道这是不好的 HTML，因为在另一个 HTML 标记中有一个 HTML 标记和纯文本。

setTimeout(function() {
  $('.testDiv')[0].childNodes[1].nodeValue = "1"
}, 500);
setTimeout(function() {
  $('.testDiv')[0].childNodes[1].data = '2'
}, 900);

setTimeout(function() {
  var $el = $('.testDiv'),
    $preStuff = $el.find('span').clone(true);
  $el.text('3').prepend($preStuff);

}, 1300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testDiv"><span>I like it </span> Hello World </div>

你有没有找到没有原生 Javascript 函数的方法？

这不能通过仅使用 jQuery 函数来完成，因为它是一个节点，我说得对吗？ jQuery 没有内置函数吗？

Answer 1

jQuery 没有专门用于隔离文本节点的方法，但是一旦隔离，您可以将它们包装在 $() 中并使用 replaceWith() 或 wrap() 之类的方法并将它们转换为标签元素并使用 text() 之类的方法进行替换

var $el =  $('.testDiv').contents().last().wrap('<span>').parent()

setTimeout(function() {
 $el.text('1')
}, 500);
setTimeout(function() {
  $el.text('2')
}, 900);

setTimeout(function() {      
  $el.text('3');
}, 1300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testDiv"><span>I like it </span> Hello World </div>

Answer 2

您可以使用first() 代替[0] 并使用contents() 获取所有子节点，包括文本节点。但是，我不知道执行 .data = <new value> 操作的 jQuery 方法，所以如果不存在，您可以使用 get() 来更改 textNode。

setTimeout(function() {
  $('.testDiv').first().contents().get(1).data = "1";
}, 500);
setTimeout(function() {
  $('.testDiv').first().contents().get(1).data = "2";
}, 900);

setTimeout(function() {
  var $el = $('.testDiv'),
    $preStuff = $el.find('span').clone(true);
  $el.text('3').prepend($preStuff);

}, 1300);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testDiv"><span>I like it </span> Hello World </div>

Answer 3

您可以使用以下代码更改该 div 中的 html：

$('.testDiv').html('div 内的新文本');