如何在 HTML 中的 div 上插入 link？

Question

我不太喜欢 HTML，我遇到了以下问题。

我有这个外部 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>

所以现在我想在外部 div 中添加一个 link。最好的方法是什么？

Answer 1

看看这个 fiddle。

通过document.getElementById()方法获得div。
将值设置为其 innerHTML。

这是片段。

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>

Answer 2

你可以用a元素，给他属性display:block.

a{
  display:block;
  width: 200px;
  height: 100px;
  text-align: center;
  background:yellow;
 }

<a href="#"> MY BLOCK LINK </a>

如何在 HTML 中的 div 上插入 link？

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

html

xhtml

href