如何使用 JavaScript 添加指向元素的链接？

Question

所以不是直接在每个元素中使用标签，有没有办法动态添加标签？

我要做的是首先我有一个日历，当用户单击日历上的特定日期时，用户可以在单独的页面上看到该日期发生的事情。
问题是我正在使用django-scheduler库，所以日历是预先设计的，这意味着我不能直接更改代码。 我的模板中只有{% calendar %} 。 所以我想我必须使用 JavaScript 进行控制。

这是我在页面的“来源”中看到的内容：

...
<div class="content" data-date="2020-05-27"></div>
<div class="content" data-date="2020-05-28"></div>
<div class="content" data-date="2020-05-29"></div>
...

对于每个data-date ，我想添加如下所示的链接：www.some-webpage.com/2020-05-27

有没有可能用 JavaScript 做到这一点？ 提前致谢。 :)

Answer 1

您可以在按钮的onClick下面添加function。 在这里，我使用document.querySelectorAll到 select 所有具有data-date属性的元素，然后遍历每个元素以形成一个带有基于data-date属性的链接a标签。

 function addDateLink() { document.querySelectorAll('[data-date]').forEach(div => { const date = div.getAttribute('data-date') div.innerHTML = `<a href="www.some-webpage.com/${date}">${date}</a>` }) }

 <div class="content" data-date="2020-05-27"></div> <div class="content" data-date="2020-05-28"></div> <div class="content" data-date="2020-05-29"></div> <input type="button" value="Display Link" onclick="addDateLink()"/>

Answer 2

您可以为每个使用地图功能并添加一个链接