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.
$("#navbarPhoneNumber a").replaceWith("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");
Try This
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'));