jQuery .Text（）函数正在替换元素中的HTML

Question

我正在尝试动态替换元素内的文本，但是.text()函数正在替换文本和HTML。 关于如何仅编辑实际文本有任何想法吗？

<div>
  <h3 class="titleHeading">My Title <a ng-click="openTooltip('getMoreInfo')"><span class="toolTip"></span></a>
<div>

我想将单词“我的标题”更改为“我的新标题”，但是，每当我使用.text（）函数时，它都会替换我所有的html，而我的定位标记也消失了。

这是我的jQuery：

$('h3.titleHeading').text("My New Title")

然后，我的输出是-再次，代码删除了我需要工具提示的锚标记。

<div>
  <h3 class="titleHeading">My New Title 
<div>

Answer 1

开发HTML时，如果您的元素包含子HTML元素，则也要使其包含纯文本是个坏主意。 这会引起类似您在此处看到的问题。 一个简单的解决方案是将您的文本放在span 。 （注意：不要忘记关闭h3 。）

<div>
  <h3 class="titleHeading">
    <span id="titleHeadingText">My Title</span>
    <a ng-click="openTooltip('getMoreInfo')">
      <span class="toolTip"></span>
    </a>
  </h3>
<div>

现在，您可以轻松更改文本的元素，而不会影响其他元素。

$("#titleHeadingText").text("My New Title");

Answer 2

您应该执行以下代码中概述的一些操作

1. 关闭<h3>元素
2. 自动换行要在改变span

例

<div>
  <h3 class="titleHeading">
    <span class="titleHeadingText"> My Title</span>
    <a ng-click="openTooltip('getMoreInfo')">
      <span class="toolTip"></span>
    </a>
  </h3> 

jQuery的

$('h3.titleHeadingText').text("My New Title")

Answer 3

为了获得预期的结果，只需通过contents（）数据更新h3的innerText，而不要使用text（）

1. jQuery contents（）将返回DOM元素的对象
2. “数据”属性将提供元素的innerText

 $('.titleHeading').contents()[0].data = "My New Title" 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h3 class="titleHeading">My Title <a ng-click="openTooltip('getMoreInfo')"><span class="toolTip"></span></a> <div> 

codepen- https: //codepen.io/nagasai/pen/YoXXjd ? editors = 1010

Answer 4

如果您无权访问代码，则仅遍历文本节点并将其textContent替换为新内容。 这将使其他现有的HTML保持不变。

取自这个答案 。

 $('h3.titleHeading').contents().filter(function() { return this.nodeType == 3 }).each(function(){ this.textContent = this.textContent.replace('My Title','My New Title'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h3 class="titleHeading">My Title <a ng-click="openTooltip('getMoreInfo')"><span class="toolTip"></span></a> <div>