从锚标记中的属性 href 加载特定 div 中的 html 文件

Question

Div in HTML file

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

anchor tag with href attribute

<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);
            }

Output in console is showing the path of the url

/Accounts/profile

If the ev.preventDefault(); is removed, and commenting the line gridWrapper.innerHTML = $(".menu__link--current").attr("href") , the html page gets loaded but not in the particular content div.

The problem is i want to load that particular html page with href attribute in content div. Any Help will be much appreciated. Thank You.

Answer 1

You cant load external html with InnerHTML . InnerHTMl is used to insert the HTML elements into the document or targeted div. To load an external Html file, you have to use .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);
}