Javascript Node.appendChild 的参数 1 没有实现接口 Node
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31913642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Argument 1 of Node.appendChild does not implement interface Node
提问by user1173517
I am new to JavaScript, and i cannot figure out what are interface nodes? Below is my code with the error
我是 JavaScript 新手，我不知道什么是接口节点？下面是我的错误代码
Panel = function () {
var popUpDiv = document.getElementById("firewall-content");
var panelDiv = $("<div></div>").addClass("side_panel");
popUpDiv.appendChild(panelDiv);
};
采纳答案by CodingIntrigue
appendChildis 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:
appendChild是原生 DOM 方法，只接受 DOM 节点作为参数。您尝试附加的元素 ( panelDiv) 是一个 jQuery 对象，而不是一个 DOM 元素。您可以附加 DOM 元素：
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):
或者在您的代码中一直使用 jQuery 的内置函数（如果您使用的是 jQuery，则无论如何都应该这样做）：
Panel = function () {
var popUpDiv = $("#firewall-content");
var panelDiv = $("<div></div>").addClass("side_panel");
popUpDiv.append(panelDiv);
};
回答by ozil
Using javaScript
使用 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
使用 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>回答by Nole
I had this problem. Since JavaScript don't have the best error handling i got this error message.
我有这个问题。由于 JavaScript 没有最好的错误处理，因此我收到了此错误消息。
I used following code:
我使用了以下代码：
var myArray = ['one','two', 'three'];
for (var i = 0; i < 4; i++) {
alert(myArray[i]);
}
The problem was that myArray have three elements (with index id's 0,1,2) and I tried to access to element with index id 3. Element myArray[3] don't existso I got message "TypeError: Argument 1 of Node.appendChild is not an object.". Maybe is this solution for your problem.
问题是 myArray 有三个元素（索引 ID 为 0,1,2），我试图访问索引 ID 为 3 的元素。元素 myArray[3] 不存在所以我收到消息“TypeError: Argument 1 of Node .appendChild 不是一个对象。”。也许这是您问题的解决方案。
回答by Manivannan A
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>回答by Arun P Johny
The problem is panelDivis a jQuery object, not a dom element reference, and the Node.appendChild() expect a Node to be passed as its argument.
问题是panelDivjQuery 对象，而不是 dom 元素引用，并且 Node.appendChild() 期望将 Node 作为其参数传递。
Since you are using jQuery, you can use the .append() method like
由于您使用的是 jQuery，您可以使用 .append() 方法，如
Panel = function () {
var popUpDiv = $("#firewall-content");
var panelDiv = $("<div></div>").addClass("side_panel");
popUpDiv.append(panelDiv);
};
Or you can get the Node reference from the jQuery object like
或者您可以从 jQuery 对象中获取 Node 引用，例如
Panel = function () {
var popUpDiv = document.getElementById("firewall-content");
var panelDiv = $("<div></div>").addClass("side_panel");
popUpDiv.appendChild(panelDiv[0]);
};
