如何使用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.ome-webpage.com/2020-05-27

用JavaScript做这件事有可能吗？提前谢谢。:)

Answer 1

您可以在按钮的onClick中添加下面的函数。在这里，我使用document.querySelectorAll选择具有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

您可以为每一个用户使用map-函数并添加一个链接。