Как добавить ссылку на элемент с 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 кнопки. Здесь я использую 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-функцию для каждого и добавить ссылку