如何将 link 添加到具有 JavaScript 的元素?
How do I add link to an element with JavaScript?
所以不是直接在每个元素中使用标签,有没有办法动态添加标签?
我想做的是首先我有一个日历,当用户单击日历上的特定日期时,用户可以在单独的页面上查看该日期发生的事情。
问题是我正在使用 django-scheduler
库,所以日历是预先设计的,这意味着我不能直接更改代码。我的模板中只有 {% calendar %}
。所以我想我必须使用 JavaScript 来控制。
这是我在页面 'source' 中看到的内容:
...
<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
,我想添加 link,它看起来像:www.some-webpage.com/2020-05-27
有没有可能用 JavaScript 做到这一点?提前致谢。 :)
您可以在按钮的onClick
中添加以下功能。
在这里,我使用 document.querySelectorAll
到 select 所有具有 data-date
属性的元素,然后遍历每个元素以基于 [=] 形成一个 a
标签 link 14=]属性。
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()"/>
你可以为每个使用映射函数并添加一个 link
所以不是直接在每个元素中使用标签,有没有办法动态添加标签?
我想做的是首先我有一个日历,当用户单击日历上的特定日期时,用户可以在单独的页面上查看该日期发生的事情。
问题是我正在使用 django-scheduler
库,所以日历是预先设计的,这意味着我不能直接更改代码。我的模板中只有 {% calendar %}
。所以我想我必须使用 JavaScript 来控制。
这是我在页面 'source' 中看到的内容:
...
<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
,我想添加 link,它看起来像:www.some-webpage.com/2020-05-27
有没有可能用 JavaScript 做到这一点?提前致谢。 :)
您可以在按钮的onClick
中添加以下功能。
在这里,我使用 document.querySelectorAll
到 select 所有具有 data-date
属性的元素,然后遍历每个元素以基于 [=] 形成一个 a
标签 link 14=]属性。
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()"/>
你可以为每个使用映射函数并添加一个 link