Dynamically Changing text with jQuery-CodePudding

I have a script which calls and displays the users phone number to them on a header. That works great. However, I am needing to change text on the page that I can't edit directly. There is a phone number that I am needing to replace with the same ID as the header.

Help me change the href 800 number and the span 800 number with jQuery please! I'm stuck!

The code below is hard coded and I don't have access to change it. So it must be done dynamically.

<div class="flex-item flex-item-nogrow navbar-icon" id="navbarPhoneNumber">
                <a href="tel:8005555555" class="flex-wrapper align-items-center navbar-icon-link">
                    <i class="fa fa-phone" aria-hidden="true"></i> <span>(800) 555-5555</span>                </a>
            </div>

I have tried this

$("#navbarPhoneNumber a").html("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");

It didn't work.

CodePudding user response：

$("#navbarPhoneNumber a").replaceWith("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");

Try This

CodePudding user response：

var $phoneNumberA = jQuery('#navbarPhoneNumber a');
var $phoneNumber = jQuery('#navbarPhoneNumber span');

$phoneNumberA.attr('href', $phoneNumberA.attr('href').replace(/(tel:...)/, 'tel:123'));
$phoneNumber.text($phoneNumber.text().replace(/\(.*\)/, '123'));