I need the equivalent of .load() to JS

If you want to do it without JS, I think this will help you, add this inside #b

<iframe src="x.html"></iframe>

The simple answer is you're doing things that are fairly complicated to get done correctly without a library like jQuery. Here's something that "works", but with no error checking or cross-browser perfection. You really probably don't want this... but here it is.

<!DOCTYPE html>
<html>
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('a').addEventListener('click', function (e) {
                e.preventDefault();

                var div = document.createElement('div');
                div.id = 'b';
                document.body.appendChild(div);

                var xhr = new XMLHttpRequest();

                xhr.onload = function () {
                    div.innerHTML = this.response;
                };

                xhr.open('GET', 'x.html', true);
                xhr.send();
            }, false);
        }, false);
    </script>
</head>
<body>
    <a id="a" href="#">load</a>
</body>
</html>

UPDATE:

Using Fetch API with .then()

function load(url, element)
{
    fetch(url).then(res => {
        element.innerHTML = res; 
    });
}

Old XMLHttpRequest

function load(url, element)
{
    req = new XMLHttpRequest();
    req.open("GET", url, false);
    req.send(null);
    
    element.innerHTML = req.responseText; 
}

Usage

load("x.html", document.getElementById("b"));

Tags:

Javascript

Function

Jquery

Recent Posts