Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

234
Views
How to Find a text in page and then add hyperlink to it using JS?

I am developing a Wordpress website and installed a theme. Some of the elements don't have the option to add hyperlinks to it, so I am trying to add hyperlinks or make the blocks clickable using JS.

I want to add hyperlinks to those li elements and theme currently doesn't support it.

My Logic:

  1. Search for the text in li once page loads.
  2. Add Hyperlink to it if text is found.
<div class="col-lg-6 col-sm-6">
  <ul class="cyber-item">
    <li>
      <i class="bx bx-check"></i> abcd
    </li>
    <li>
      <i class="bx bx-check"></i> efgh
    </li>
    <li>
      <i class="bx bx-check"></i> Content Delivery Network
    </li>
    <li>
      <i class="bx bx-check"></i> 24/7 Hours services
    </li>
    </ul>
</div>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

There's a few ways to tackle this. If you're using jquery already you might want to take a look at the documentation for the .wrap() function: https://api.jquery.com/wrap/

If you're not using jquery, it's simple enough to do with plain js. You will first need to select all the <li> elements and then loop through them and replace the contents with your <a> tags one by one. You can do this by modifying the element's innerHTML property.

I will say this seems like a strange issue. There must be a way for you to add links to your content without resorting to this method. And you'll still need to figure some other problems out - how will you know where each link should go, for instance?

Anyway, here is a snippet so you can see the principle behind what you asked:

const items = document.querySelectorAll('li')
items.forEach((item) => {
  const children = item.innerHTML
  item.innerHTML='<a href="http://stackoverflow.com">' + children + '</a>'
})
<div class="col-lg-6 col-sm-6">
  <ul class="cyber-item">
    <li>
      <i class="bx bx-check"></i> abcd
    </li>
    <li>
      <i class="bx bx-check"></i> efgh
    </li>
    <li>
      <i class="bx bx-check"></i> Content Delivery Network
    </li>
    <li>
      <i class="bx bx-check"></i> 24/7 Hours services
    </li>
    </ul>
</div>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!