Argument 1 of Node.appendChild does not implement interface Node

Question

I am new to JavaScript, and i cannot figure out what are interface nodes? Below is my code with the error

Panel = function () {
   var popUpDiv = document.getElementById("firewall-content");
   var panelDiv = $("<div></div>").addClass("side_panel");
   popUpDiv.appendChild(panelDiv);
};

Answer 1

appendChild is a native DOM method and only accepts DOM nodes as a parameter. The element you're trying to append (panelDiv) is a jQuery object, not a DOM element. You can either append the DOM element:

Panel = function () {
   var popUpDiv = document.getElementById("firewall-content");
   var panelDiv = $("<div></div>").addClass("side_panel")[0];
   popUpDiv.appendChild(panelDiv);
};

Or use jQuery's built in functions all the way through your code (which you should anyway if you're using jQuery):

Panel = function () {
   var popUpDiv = $("#firewall-content");
   var panelDiv = $("<div></div>").addClass("side_panel");
   popUpDiv.append(panelDiv);
};

Answer 2

Using javaScript

Panel = function () {
    var popUpDiv = document.getElementById("firewall-content");
    var div = document.createElement("div");
    div.style.width = "100px";
    div.style.height = "100px";
    div.innerHTML = "Hello";
    div.className = "side_panel";
    
    popUpDiv.appendChild(div);
};

Panel();

.side_panel {
    border:1px solid red;
}

<div id="firewall-content"></div>

using jQUery

Panel = function () {
    var panelDiv = $("<div> Hello World</div>").addClass("side_panel");
    
    $("#firewall-content").append(panelDiv);
};

Panel();

.side_panel {
    border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firewall-content"></div>