XML read error: incorrect content after an XML element of the document,

I am loading ajax when testing in the browser it launches the following error:

   $(document).ready(function () {

    $.ajax({

        url: "otrapagina.html",
        method: "GET",
        dataType: "html",
        success: function (response) {
           $('.lateral').append($(response));
        }
    });
});

code in another page.html

<a href="#" >
    <img src="img/mail.png" alt="Correo-e"/>
    <span>Correo-e</span>
</a>
<a href="#">
    <img src="img/snapchat.png" alt="Snapchat"/>
    <span>Snapchat</span>
</a>
<a href="#" >
    <img src="img/twitter.png" alt="Twitter"/>
    <span>Twitter</span>
</a>

Code in index.html

<aside class="lateral">
            <img src="img/imagen.jpg">     
 </aside>

• The error message appears in Mozilla: XML read error
• In Chrome: XMLHttpRequest can not load, origin request are only supported for protocol scheme: http, data, chrome, chrome-extension, https
• Edge successfully runs the script
• file: /// C: /xampp/htdocs/pAjax/index.html
• Use jquery-3.2.1.js by cdn