jquery append to element that contains specific text

Question

I have the following html which is a Bootstrap card with two nested cards.

<div id="myCard" class="card-body">
    <div class="card">
        <div class="card-header">
            card a
        </div>
        <div class="card-body">

        </div>
    </div>
    <div class="card">
        <div class="card-header">
            card b
        </div>
        <div class="card-body">

        </div>
    </div>
</div>

How can I insert html into the card-body that contains the text "card b" in the card-header using JQuery?

Does this answer your question? [How can I find elements by text content with jQuery?](https://stackoverflow.com/questions/7321896/how-can-i-find-elements-by-text-content-with-jquery) — Phil, May 29 '23 at 23:30

score 2 · Accepted Answer · answered May 30 '23 at 00:02

Loose traversing (more stable if the elements get wrapped):

$('.card-header:contains(card b)')
  .parents('.card')
  .find('.card-body')
  .text('INSERTED TEXT');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myCard" class="card-body">
    <div class="card">
        <div class="card-header">
            card a
        </div>
        <div class="card-body">

        </div>
    </div>
    <div class="card">
        <div class="card-header">
            card b
        </div>
        <div class="card-body">

        </div>
    </div>
</div>

More strict traversing:

$('.card-header:contains(card b)')
  .parent()
  .children('.card-body')
  .text('INSERTED TEXT');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myCard" class="card-body">
    <div class="card">
        <div class="card-header">
            card a
        </div>
        <div class="card-body">

        </div>
    </div>
    <div class="card">
        <div class="card-header">
            card b
        </div>
        <div class="card-body">

        </div>
    </div>
</div>

jquery append to element that contains specific text

1 Answers1