javascript - 如何正确使用appendChild

Question

$(document).ready(function() {
    $("a:last").on("click", function(event) {
        event.preventDefault();
        var url = $("a:last").attr("href");
        var page = url.slice(-2).trim();
        var newDiv = document.createElement("div");
        $(newDiv).addClass("content");
        $(newDiv).addClass(page);
        $(newDiv).load(url);
        document.getElementById("main").appendChild($(newDiv)); 
    });
});

我想创建一个新的 div 并向其中加载一些内容，然后将其附加到“main”div，但我得到一个 TypeError:

Argument 1 of Node.appendChild does not implement interface Node.

我已经有一个带有 id="main" 的 div，为什么我不能将我的新 div 附加到它？

Answer 1

基本上 appendChild() 需要一个 node 对象作为它的参数，但是这里你传递的是一个 jquery 对象。您可以通过传递节点对象来修复它，

document.getElementById("main").appendChild(newDiv);

并且由于您使用的是 jquery，您可以使用它自己的 append() 函数，

$(document).ready(function() {
    $("a:last").on("click", function(event) {
        event.preventDefault();
        var url = $("a:last").attr("href");
        var page = url.slice(-2).trim();
        var newDiv = $("<div>");
        newDiv.addClass("content");
        newDiv.addClass(page);
        newDiv.load(url);
        $("#main").append(newDiv); 
    });
});