How to add another HTML page to .innerHTML-CodePudding

Here's my code for a section of my page that i want to change

let existinguser = document.querySelector('#existing-user');
let table= document.querySelector('#table-contents');

existinguser.addEventListener('click', () => {
    table.innerHTML = '';
});

since innerHTML only accepts string, how do i display content from another page eg. new_page.html using .innerHTML

I dont't know if this will be required but here are the #existing-user snippets

 <div >
                                <div >
                                    <div >Existing User's requests</div>
                                    <div >
                                        <a  href="#" id="existing-user">View Details</a>
                                        <div ><i ></i></div>
                                    </div>
                                </div>
                            </div>

CodePudding user response：

You should use iframe for adding html pages

CodePudding user response：

You can do hacky stuff. You can use Javascript to fetch another html. fetch('new_page.html').then(res=>res.text()) and add the response to the innerHTML.

CodePudding user response：

Use jQuery .load(url) or any other method of Ajax in general.

$(".container").load("https://jsonplaceholder.typicode.com/");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>next content is loaded from another html page</h1>
<div  style="background:#eee"></div>
<h1>previous content was loaded from another html page</h1>