Ссылка на тег не работает после добавления html с js

ребята.

Мне нужна помощь

я хочу перенаправить страницу, когда щелкаю по всему диапазону в теге, но если щелчок по тегу p не работает

сначала я загружаю свой код

HTML

  <div id = "news" class = "news">
     <a href = "{{ post.address }}" onmouseover = "newsMouseOver(this);" onmouseout = "newsMouseOut(this);">
        <p class = "news-title">{{ post.limit_title }}</p>
        <p class = "news-date">{{ post.created_at|date:"Y.m.d" }}</p>
     </a>
  </div>

css

.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: "Noto";
  color: #666666;
  margin-left: 20px;
}

.news a:hover p {
  font-family: "Noto-Medium";
  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;
}

js

// all find p tag
var re_html = /<\s*p[^>]*>([^<]*)<\s*/\s*p\s*>/g;

// inner text
var re = /<\s*p[^>]*>([^<]*)<\s*/\s*p\s*>/;


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 = "<p class='news-title'>" + innerText1[1] + "</p>\
    <p class='news-date'>" + innerText2[1] + "</p>\
    <span><i class='fas fa-angle-right'></i></span>"
}

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 = "<p class='news-title'>" + innerText1[1] + "</p>\
    <p class='news-date'>" + innerText2[1] + "</p>"
}

это мой код

при наведении курсора на тег изменить html-код и установить стиль

и возвращать код и стиль при наведении мыши на тег

наконец, ссылка работает при удалении js

но мне нужен js-код Как я могу сделать..