Неожиданный тег на моем объекте dom при работе с js

function makeList(response) {
    const div = document.querySelector(
        ".main__collection-swiper-wrapper");
    const ul = document.createElement("ul");
    ul.className =
        "main__collection-list main__session-list swiper-slide ";

    response.sessions.forEach((session) => {
        const li = document.createElement("li");
        li.className =
            "main__collection-item main__session-item";

        const element = session.movie_id ?
            `<a href="http://127.0.0.1:8000/detail/${session.movie_id}" class="main__collection-link main__session-link">
        <figure class="main__collection-box main__session-box">
            <div class="main__img-wrapper main__session-wrapper">
                <img src="${session.movie_img}" alt=" top movie image" class="main__collection-img">
            </div>
            <figcaption class="main__collection-title">
                <h3 class="main__collection-title">${session.movie_name}</h3>
                <ul class="main__session-sub-list main__collection-sub-list main__tickets-sub-list">
                    <li class="main__sub-item">
                        <a href="#" class="main__sub-link main__tickets-sub-link"> ${session.start_time} </a>
                    </li>
                    <li class="main__sub-item">
                        <a href="#" class="main__sub-link main__tickets-sub-link price"> ${session.price} </a>
                    </li>
                    <li class="main__sub-item">
                        <a href="#" class="main__sub-link main__tickets-sub-link"> ${session.hall} </a>
                    </li>
                    <li class="main__sub-item">
                        <a href="#" class="main__sub-link main__tickets-sub-link"> Edit </a>
                    </li>
                    <li class="main__sub-item">
                        <a href="http://127.0.0.1:8000/user_admin/delete_session/${session.id}" class="main__sub-link main__tickets-sub-link">Delete </a>
                    </li>
                </ul>
            </figcaption>
        </figure>
    </a>` :
            "";

        li.innerHTML = element;

        ul.appendChild(li);
    });

    div.appendChild(ul);

    cashFormatter();
    makeSwiper();
}

Проблема в том, что когда я получаю список сессий с сервера и составляю список с данными, отправляемыми клиенту (браузеру), мой js дополнительно добавляет тег 'a' внутри моего первого подсписка-элемента, я не могу понять, что это за проблема?

попробуйте с помощью ChatGPT, однако это не работает

Вернуться на верх