title: a tag link is not working after add html with js
body: <p>guys.</p>
  <p>i need some help</p>
  <p>i want redirect page when click in all of range in a tag but, if click p tag is not working</p>
  <p>first i upload my code</p>
  <p><strong>html</strong></p>
  <pre><code>  &lt;div id=&quot;news&quot; class=&quot;news&quot;&gt;
       &lt;a href=&quot;{{ post.address }}&quot; onmouseover=&quot;newsMouseOver(this);&quot; onmouseout=&quot;newsMouseOut(this);&quot;&gt;
          &lt;p class=&quot;news-title&quot;&gt;{{ post.limit_title }}&lt;/p&gt;
          &lt;p class=&quot;news-date&quot;&gt;{{ post.created_at|date:&quot;Y.m.d&quot; }}&lt;/p&gt;
       &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  <p><strong>css</strong></p>
  <pre><code>.news {
    width: 501px;
    height: 50px;
    border-radius: 5px;
    background-color: #ffffff;
    margin-top: 9px;
    font-size: 13px;
    color: #666666;
    position: static;
  }
  
  .news a {
    border-radius: 5px;
    color: #666666;
    display: flex;
    height: 50px;
    align-items: center;
    position: relative;
  }
  
  .news a p {
    font-size: 13px;
    font-family: &quot;Noto&quot;;
    color: #666666;
    margin-left: 20px;
  }
  
  .news a:hover p {
    font-family: &quot;Noto-Medium&quot;;
    color: #333333;
    position: static;
  }
  
  .news a:hover {
    border: 1px solid #24b97e;
  }
  
  .news a .news-date {
    position: absolute;
    top: 18px;
    right: 15px;
    color: #bbbbbb;
  }
  
  .news a:hover .news-date {
    padding: 0;
    color: #999999;
    position: absolute;
    right: 10%;
    text-align: end;
  }
  
  .news a span {
    background-color: #24b97e;
    color: white;
    position: absolute;
    width: 8%;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
  }
  </code></pre>
  <p><strong>js</strong></p>
  <pre><code>// all find p tag
  var re_html = /&lt;\s*p[^&gt;]*&gt;([^&lt;]*)&lt;\s*\/\s*p\s*&gt;/g;
  
  // inner text
  var re = /&lt;\s*p[^&gt;]*&gt;([^&lt;]*)&lt;\s*\/\s*p\s*&gt;/;
  
  
  function newsMouseOver(self) {
    let origianl_html= self.innerHTML;
    let innerTextList = origianl_html.match(re_html);
    let innerText1 = re.exec(innerTextList[0]);
    let innerText2 = re.exec(innerTextList[1]);
  
    self.innerHTML = &quot;&lt;p class='news-title'&gt;&quot; + innerText1[1] + &quot;&lt;/p&gt;\
      &lt;p class='news-date'&gt;&quot; + innerText2[1] + &quot;&lt;/p&gt;\
      &lt;span&gt;&lt;i class='fas fa-angle-right'&gt;&lt;/i&gt;&lt;/span&gt;&quot;
  }
  
  function newsMouseOut(self) {
    let origianl_html= self.innerHTML;
    let innerTextList = origianl_html.match(re_html);
    let innerText1 = re.exec(innerTextList[0]);
    let innerText2 = re.exec(innerTextList[1]);
  
    self.innerHTML = &quot;&lt;p class='news-title'&gt;&quot; + innerText1[1] + &quot;&lt;/p&gt;\
      &lt;p class='news-date'&gt;&quot; + innerText2[1] + &quot;&lt;/p&gt;&quot;
  }
  </code></pre>
  <p>this is my code</p>
  <p>when mouseover to a tag, change html code and set style</p>
  <p>and, return code and style when mouseout to a tag</p>
  <p>finally, link working when remove js</p>
  <p>but i need js code
  how can i do..</p>