如何用JavaScript给元素添加链接？

Question

那么，有没有办法不直接在每个元素中使用tag，而是动态添加tag呢？我想做的是，首先我有一个日历，当用户点击日历上的某个日期时，用户可以在一个单独的页面看到该日期发生的事情。 我使用的是 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.com2020-05-27 是否有可能用JavaScript做到这一点？先谢谢你了:)

Answer 1

你可以在下面的函数中添加 onClick 的按钮。这里我使用的是 document.querySelectorAll 来选择所有带有 data-date 属性，然后在每个元素上循环形成一个 a 标签，并在标签上加上基于 data-date 属性。

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-function为every添加一个链接。