Search code examples
htmlxhtmlhref

How can I insert a link on a div in HTML?

I am not so into HTML and I have the following problem.

I have this external div:

<div data-wow-delay="0.25s" class="clearfix service-list odd wow fadeInLeft animated" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInLeft;">
    <div class="service-image">
        <img alt="test 1" src="http://localhost/onyx/wp-content/themes/accesspress-parallax/images/no-image.jpg">
    </div>

    <div class="service-detail">
        <h3>test 1</h3>
        <div class="service-content">
            <p>https://it.wikipedia.or /wiki/Pagina_principale</p>
            <p>and</p>
            <p>https://www.google.it/</p>
            <p>&nbsp;</p>
        </div>
    </div>
</div>

So now I want add a link to the external div. What is the best way to do it?

Solution

  • Check out this fiddle.

    1. obtain the div by document.getElementById() method.
    2. Set value to its innerHTML.

    Here is the snippet.

    document.getElementById("external").innerHTML = "<a href='http://www.google.com'> Google </a>";
    <div id="external" data-wow-delay="0.25s" class="clearfix service-list odd wow fadeInLeft animated" style="visibility: visible; animation-delay: 0.25s; animation-name: fadeInLeft;">
  <div class="service-image">
    <img alt="test 1" src="http://localhost/onyx/wp-content/themes/accesspress-parallax/images/no-image.jpg">
  </div>

  <div class="service-detail">
    <h3>test 1</h3>
    <div class="service-content">
      <p>https://it.wikipedia.or /wiki/Pagina_principale</p>
      <p>and</p>
      <p>https://www.google.it/</p>
      <p>&nbsp;</p>
    </div>
  </div>
</div>