我需要等效的.load()到JS

7 javascript jquery function

我正在开发一个脚本,但我不能使用jQuery库,因此我需要在JS中使用等效的.load().

我需要在没有jQuery的情况下这样做:

$(document).ready(function(){

$('#a').click(function(){
   $('body').append('<div id="b"></div>')
   $('#b').load('x.html')
});

});
Run Code Online (Sandbox Code Playgroud)

谢谢!

Joh*_*ohn 12

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

    element.innerHTML = req.responseText; 
}
Run Code Online (Sandbox Code Playgroud)

用法

load("x.html", document.getElementById("b"));
Run Code Online (Sandbox Code Playgroud)


小智 6

简单的答案是,如果没有像jQuery这样的库,你正在做的事情相当复杂.这是"有效"的东西,但没有错误检查或跨浏览器的完美.你真的可能不想要这个...但是在这里.

<!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>
Run Code Online (Sandbox Code Playgroud)