如何正确使用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，但我收到类型错误：

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

我已经有一个 div 和 id="main"，为什么我不能将新的 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); 
    });
});

Answer 2

问题是因为您混淆了 jQuery 和普通的旧 JS。错误本身是因为当它期待 DOMElement 时，您正在向 appendChild() 证明 jQuery 对象。无论如何，当您使用 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);
});

Answer 3

$(newDiv) 是一个 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); 
    });
});

如何正确使用appendChild

How to properly use appendChild

javascript

jquery

typeerror

appendchild