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

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

关闭<h3>元素
在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（）

jQuery contents（）将返回DOM元素的对象
'data'属性将提供元素的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保持不变。

来自this answer。

$('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>

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

4 个答案: