Wie man richtig appendChild verwenden

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

Ich möchte ein neues div und laden einige Inhalte in es zu erstellen, es dann in die „main“ anhängen div, aber ich erhalte eine Typeerror:

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

ich schon habe ein div mit id="main", warum kann ich mein neues div nicht anhängen?

Answer 1

Grundsätzlich appendChild() erwartet ein node Objekt als Parameter, aber hier übergeben Sie ein Jquery-Objekt. Sie können das Problem beheben, indem ein Knoten-Objekt übergeben,

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

Und da Sie Jquery verwenden, können Sie eine eigene append() Funktion verwenden,

$(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

Das Problem ist, weil Sie jQuery abmischen und einfaches altes JS. Der Fehler selbst liegt daran, dass Sie ein jQuery-Objekt für appendChild() nachweisen, wenn es ein DOME-Element erwartet. Da Sie jQuery sowieso verwenden, können Sie dies auch zum Erstellen Ihrer Elemente verwenden. Versuchen Sie folgendes:

$("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) ist ein jQuery-Objekt, nicht der Knoten. Sie müssen den Knoten übergeben. Dies funktioniert

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