I am making a single page application which all pages are requested via fetch api. The problem is that, after successfully fetching contents, i cannot be able to access the using document.querySelector() or document.querySelectorAll() and when i try to check if div with class mainCont is empty or not as shown on codes below, it returs empty child nodes while the content from fetch (data) are displayed to the users window but not on document source code.
const mainCont = document.querySelector('.mainCont');
const pathnamesList = ['', 'index', 'logout', 'profile', 'security', 'setting'];
const wP = window.location.pathname;
const pathnameSplit = wP.split('/', 3)[1];
/* -- fetch request -- */
async function loadViews(url) {
const response = await fetch(url)
.then(response => response.text())
.then(data => {
mainCont.innerHTML = data;
}).catch((error) => console.log(error));
return;
}
/* -- // -- */
if (pathnamesList.indexOf(pathnameSplit) !== -1 && wP !== '/') {
document.title = `demoDomain | ${pathnameSplit}`;
loadViews(`${pathnameSplit}.html`);
if (mainCont.childElementCount == 0) {
console.log('Empty div');
}else {
console.log(mainCont.childNodes);
}
console.info(pathnameSplit);
} else {
console.error('No such directory');
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="mainCont">
</div>
<script src="route.js"></script>
<script src="main.js"></script>
</body>
</html>Is there a possible way to access those links (DOM elements) from fetch API via vanilla javascript?Image of the elements that have successfully fetched but their source codes are not shown in pages source
