Geek Answers Handbook

Argument 1 from Node.appendChild does not implement Node interface

I am new to JavaScript and I cannot figure out which interface nodes? Below is my error code

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

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

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

Or use jQuery built-in functions completely through your code (which you should use jQuery anyway):

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

I had this problem. Since JavaScript does not have better error handling, I received this error message.

I used the following code:

 var myArray = ['one','two', 'three']; for (var i = 0; i < 4; i++) { alert(myArray[i]); }

The problem was that myArray has three elements (with index id 0,1,2), and I tried to access the element with index id 3. The element myArray [3] does not exist , so I got the message "TypeError: Argument 1 from Node.appendChild is not an object. " Perhaps this is the solution to your problem.

+1
source

The panelDiv task is a jQuery object, not a reference to the dom element, and Node.appendChild () expects Node to be passed as an argument.

Since you are using jQuery, you can use the .append () method, for example

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

Or you can get a Node link from a jQuery object like

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

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>
0
source 

 function myCtrl($scope) { var count=0; $scope.wrapClonedDiv = function() { var iEl = angular.element( document.querySelector( '#paraID' ) ); var wEl = angular.element( document.querySelector( '#wrapDIV' ) ); iEl.append(wEl.clone().attr('id',"wrapDIV"+count)); count++; } $scope.wrapremoveDiv = function() { var iEl = angular.element( document.querySelector( '#wrapDIV'+count ) ); console.log(iEl); iEl.remove() count--; } } 
 <!DOCTYPE html> <html ng-app="" ng-controller="myCtrl"> <body> <style> div { border: 2px solid blue; } p { background: yellow; margin: 4px; } .wrapDIV { color: red; padding:5px; border:2px solid red; } </style> <br/> <button ng-click="wrapClonedDiv()">Wrap cloned DIV</button> <button ng-click="wrapremoveDiv()">Wrap Remove DIV</button> <br/> <p id="wrapDIV">Hello</p> <br/> <div class="paraID" id="paraID"> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
0
source

More articles:


All Articles