jQuery .Text() function is replacing HTML within element

Question

I am trying to replace text within an element on the fly, however .text() function is replacing both text and HTML. Any thoughts on how I only edit the actual text?

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

I want to change the words "My Title" to "My New Title", however whenever I use .text() function, it replaces all of my html and my anchor tag disappears.

Here is my jQuery:

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

My output is then - again, the code removes my anchor tag which I need for a tooltip.

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

wrap your text in a span. that way its specific to exactly what you want. — Daniel A. White
– Daniel A. White, Commented Jun 12, 2019 at 15:49
Note that the h3 element should be closed, perhaps that's why you're confused by what is happening. <h3 class="titleHeading">My Title <a ng-click="openTooltip('getMoreInfo')"><span class="toolTip"></span></a> should be <h3 class="titleHeading">My Title <a ng-click="openTooltip('getMoreInfo')"><span class="toolTip"></span></a></h3> and .text(...) is replacing everything inside the <h3>...</h3>. — user247702
– user247702, Commented Jun 12, 2019 at 15:53
@Stijn or, possibly, <h3 class="titleHeading">My Title</h3><a ng-click="openTooltip('getMoreInfo')"><span class="toolTip"></span></a> — fdomn-m
– fdomn-m, Commented Jun 12, 2019 at 15:55

TheWandererLee · Accepted Answer · 2019-06-12 16:47:45Z

2

If you do not have access to the code, loop through only the text nodes and replace their textContent with your new content. This will keep the other existing HTML intact.

Taken from 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>

answered Jun 12, 2019 at 16:47

TheWandererLee

1,0425 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drakinite · Accepted Answer · 2019-06-12 16:05:33Z

2

When developing HTML, if you have an element with child HTML elements, it is a bad idea to have it contain plain-text as well. This causes problems like what you see here. An easy solution is to put your text inside a span. (Note: Don't forget to close your h3.)

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

You can change the elements of the text easily, now, without affecting the other elements.

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

answered Jun 12, 2019 at 16:05

Drakinite

3621 silver badge17 bronze badges

1 Comment

user2828701 Over a year ago

that makes sense, however the original developer did not do that and I am trying to alter his code using dom manipulation because I don't have access to the code base. Any thoughts on how I can accomplish this without access to the code base?

Rastalamm · Accepted Answer · 2019-06-12 16:07:07Z

1

You should do a few things as outlined in the code below

Close the <h3> element
Wrap the text you want to change in a span

Example

<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")

answered Jun 12, 2019 at 16:07

Rastalamm

1,7823 gold badges24 silver badges33 bronze badges

1 Comment

user2828701 Over a year ago

that makes sense, however the original developer did not do that and I am trying to alter his code using dom manipulation because I don't have access to the code base. Any thoughts on how I can accomplish this without access to the code base?

Naga Sai A · Accepted Answer · 2019-06-12 16:51:05Z

1

To achieve expected result, just update innerText for h3 by contents() data instead of using text()

Jquery contents() will return object of DOM elements
'data' property will provide the innerText of element

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

edited Jun 12, 2019 at 16:51

answered Jun 12, 2019 at 16:38

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery .Text() function is replacing HTML within element

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related