Modify the href attribute of an anchor tag that does not have a specified class or

Question

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this:

<td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>

However, I have a specific requirement to change some of these links to redirect to different pages. The challenge is that I cannot add id or classes to the <a> element.

Is there a way for me to dynamically change the href attribute based on the text content inside the <td></td> tags, such as "Chegada dos primeiros congressistas" in this case?

I am aware that I can replace text using

document.body.innerHTML = document.body.innerHTML.replace('Example 1', 'Change to Example 2');

, but I am unsure how to achieve the same for attributes.

Any guidance on this matter would be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

To efficiently select elements with specific content, consider using jQuery and its :contains feature:

const link = $('a:contains(Chegada dos primeiros congressistas)');
link.prop('href', 'https://foo.bar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>
  </tr>
</table>

If you prefer to avoid using a large library, you can manually iterate through the document's a elements that match the selector:

const anchor = Array.prototype.find.call(
  document.querySelectorAll('td > a'),
  a => a.textContent === 'Chegada dos primeiros congressistas'
);
anchor.href = 'https://foo.bar';

<table>
  <tr>
    <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>
  </tr>
</table>

Answer 2

To efficiently select elements with specific content, consider using jQuery and its :contains feature:

const link = $('a:contains(Chegada dos primeiros congressistas)');
link.prop('href', 'https://foo.bar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>
  </tr>
</table>

If you prefer to avoid using a large library, you can manually iterate through the document's a elements that match the selector:

const anchor = Array.prototype.find.call(
  document.querySelectorAll('td > a'),
  a => a.textContent === 'Chegada dos primeiros congressistas'
);
anchor.href = 'https://foo.bar';

<table>
  <tr>
    <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>
  </tr>
</table>

Answer 3

Answer №2

document.getElementsByTagName('a')[0].href = 'http://newlink.com'

<td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>

Answer 4

document.getElementsByTagName('a')[0].href = 'http://newlink.com'

<td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros congressistas</a></td>

Modify the href attribute of an anchor tag that does not have a specified class or

Answer №1

Answer №2

Similar questions

Can you tell me the alternatives for getServerSideProps and getStaticProps in Next.js version 14?

update the element that acts as the divider in a web address (Angular)

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

Improve your JavaScript form by implementing a time loading feature!

The onclick functionality is not functioning properly within email communications

Collaborate and pass around SQL connections among different modules

The error message "Cannot read property 'option0' of undefined" occurs when using Node.js with Express and EJS

Ways to Implement Horizontal Scrolling in Dojo FilteringSelect Component

Feeling lost when it comes to tackling the Data Access Object/Layer in an Express/MongoDB setup?

Employing specific delimiters with hogan-express while managing the {{{ yield }}} statement

Breaking the border between columns in CSS columns

How to Load XML Using jQuery Ajax in PHP Server Side Script

Stop the child component from activating the parent's onClick event

Leverage ng-value attribute when working with radio buttons in AngularJS

What is the secret to keeping a hover effect active?

Is it possible to persist $_SESSION data when sending ajax requests using jQuery in PHP?

Dynamic Interactive Content with AJAX

A guide on customizing the appearance of individual items in a vue v-for loop based on specific conditions

What is the best way to insert an iframe using getElementById?

Why is the Jquery console not displaying any values?