修改 div 中的文本，但不删除该 div 中的其他元素答案

【问题标题】：Modifying text in a div, but not deleting other elements inside that div修改 div 中的文本，但不删除该 div 中的其他元素
【发布时间】：2017-01-05 03:01:49
【问题描述】：

我有一个如下所示的 div

<div class="registered-count-container">
  <div class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"): <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span></div>
</div>

我想从具有“注册计数”类的 div 中更改文本，而不删除“注册计数容器”div 中的跨度，但是当我像这样更改文本时

$(eventPanel).find(".registered-count-inner").text("Interested");

它会清除 'registered-count-inner' 类中的所有内容，包括带有徽章类的 span。有没有办法在不删除 span 标签的情况下更改文本？

【问题讨论】：

标签： javascript jquery html asp.net-mvc

【解决方案1】：

将该文本放在另一个跨度中并仅更改它：

<div class="registered-count-container">
   <div class="">
       <span class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"):</span> 
       <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span>   

   </div>
</div>

然后是相同的代码：

$(eventPanel).find(".registered-count-inner").text("Interested");

【讨论】：

【解决方案2】：

您可以在不修改标记的情况下执行此操作。使用 jquery contents() 访问元素的 子节点 并替换第一个文本节点的文本（在您的标记中） - 请参见下面的演示：

$('.registered-count-inner').contents().get(0).nodeValue = 'new text here';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="registered-count-container">
  <div class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"): <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span></div>
</div>

【讨论】：

【解决方案3】：

由于您试图替换 div 中存在的文本节点，您可以先过滤该文本节点元素，然后更改其内容。

var eventPanel = ".registered-count-container"

var textnode = $(eventPanel).find(".registered-count-inner").contents().filter(function() {
  return this.nodeType === 3;
});

textnode[0].textContent = "Interested"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="registered-count-container">
  <div class="registered-count-inner">Registered <span class="badge"> I am span</span>
  </div>
</div>

【讨论】：

【解决方案4】：

更灵活的方法

$(document).ready(function (){
  
  replaceDivContent('.registered-count-inner', 'Registered', 'Interested');
});

function replaceDivContent(identifier, from, to){

  var newContent = $(identifier).text().replace(from, to);
  $(identifier).text(newContent);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="registered-count-inner">Registered: <span>Other Text Stuff</span></div>

【讨论】：