Как правильно использовать 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 и загрузить некоторое содержание в нем, а затем добавить его к «основным» div, но я получаю TypeError:

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. Сама ошибка заключается в том, что вы доказываете объект jQuery appendChild(), когда он ожидает DOMElement. Поскольку вы используете 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); 
    }); 
});