How can I use fetch API to populate a DIV?
The .text()
method you invoke on response body returns a promise. So the proper way to access it would be through the promise chain.
As per the documentation:
The text() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with a USVString object (text).
Here's how your updated snippet should look like:
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(html => {
// console.log(html);
document.getElementById('data').innerHTML = html;
})
.catch((err) => console.log("Can’t access " + url + " response. Blocked by browser?" + err));
<html>
<body>
<div id='data'>
</div>
</body>
</html>