Javascript 如何正确使用appendChild

我想创建一个新的div并将一些内容加载到其中，然后将其附加到主div，但我得到一个TypeError：

Node.appendChild的参数1未实现接口节点

我已经有了一个id=main的div，为什么我不能将我的新div追加到它上面呢？

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

$(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)); 
    });
});

因为您使用的是jquery，所以可以使用它自己的append函数

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

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

$(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)); 
    });
});

因为您使用的是jquery，所以可以使用它自己的append函数

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

---

问题是因为您将jQuery和普通的旧JS混为一谈。错误本身是因为您正在向appendChild证明jQuery对象，而它需要一个DomeElement。在使用jQuery时，您也可以使用它来创建元素。试试这个：

$(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); 
    });
});

---

问题是因为您将jQuery和普通的旧JS混为一谈。错误本身是因为您正在向appendChild证明jQuery对象，而它需要一个DomeElement。在使用jQuery时，您也可以使用它来创建元素。试试这个：

$(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); 
    });
});

---

$newDiv是jquery对象，而不是节点。您需要传入节点。这会奏效的

$("a:last").on("click", function(e) {
    e.preventDefault();
    var url = $("a:last").attr("href");
    var page = url.slice(-2).trim();
    $('<div />').addClass('content ' + page).appendTo('#main').load(url);
});

---

$newDiv是jquery对象，而不是节点。您需要传入节点。这会奏效的

$("a:last").on("click", function(e) {
    e.preventDefault();
    var url = $("a:last").attr("href");
    var page = url.slice(-2).trim();
    $('<div />').addClass('content ' + page).appendTo('#main').load(url);
});