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并将一些内容加载到其中，然后将其附加到＆＃34; main＆＃34; div，但我得到一个TypeError：

Node.appendChild的参数1没有实现接口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); 
    });
});

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

3 个答案: