загрузить файл html в определенный div из атрибута href в теге привязки

Question

Разделить в HTML файл

<div class="content">
  <p class="info">Please choose a category</p>
</div>

тег привязки с атрибутом href

<a class="menu__link" href="{% url 'Profile' %}">Profile</a>

My javascript function

 var gridWrapper = document.querySelector('.content');

            function loadDummyData(ev, itemName) {
                ev.preventDefault();

                closeMenu();

                gridWrapper.innerHTML = '';
                classie.add(gridWrapper, 'content--loading');
                setTimeout(function() {
                    classie.remove(gridWrapper, 'content--loading');
                    gridWrapper.innerHTML = $(".menu__link--current").attr("href")
                    console.log($(".menu__link--current").attr("href"))
                }, 500);
            }

Вывод в консоли показывает путь URL

/Accounts/profile

Если удалить ev.preventDefault();, и комментировать строка gridWrapper.innerHTML = $(".menu__link--current").attr("href"), страница html загружается, но не в конкретном div содержимого.

Проблема в том, что я хочу загрузить конкретную страницу html с атрибутом href в div содержимого. Любая помощь будет высоко ценится. Спасибо.

Answer 1

Вы не можете загрузить внешние html с помощью InnerHTML. Inner HTMl используется для вставки элементов HTML в документ или целевой div. Для загрузки внешнего файла Html необходимо использовать .load

var gridWrapper = document.querySelector('.content');
function loadDummyData(ev, itemName) {
    ev.preventDefault();

    closeMenu();

    gridWrapper.innerHTML = '';
    classie.add(gridWrapper, 'content--loading');
    setTimeout(function() {
      classie.remove(gridWrapper, 'content--loading'); 

      let path = $(".menu__link").attr("href") //Fetch path to the file
      console.log($(".menu__link").attr("href")) //Path has to be /file/filename.html
      $('.content').load(path); //========> use the path in the load method inside content div.
    }, 500);
}