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>