Question

我是JavaScript的新手，我无法弄清楚什么是接口节点？下面是我的代码，错误

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

Answer 1

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

或者在代码中使用jQuery的内置函数（如果你使用的是jQuery，你应该使用它）：

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

Answer 2

使用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>

使用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>

Answer 3

我有这个问题。由于JavaScript没有最好的错误处理，因此我收到了此错误消息。

我使用了以下代码：

var myArray = ['one','two', 'three']; 

for (var i = 0; i < 4; i++) {    
     alert(myArray[i]);
}

问题是myArray有三个元素（索引id＆＃39; s 0,1,2），我试图访问索引ID为3的元素。元素myArray [3]不要存在所以我得到了消息＆＃34; TypeError：Node.appendChild的参数1不是对象。＆＃34;。也许这是解决您问题的方法。

Answer 4

问题是panelDiv是一个jQuery对象，而不是一个dom元素引用，而Node.appendChild（）期望一个Node作为其参数传递。

由于您使用的是jQuery，因此您可以使用.append（）方法，如

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

或者你可以从jQuery对象中获取Node引用，如

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

Answer 5

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>

Node.appendChild的参数1没有实现接口Node

5 个答案: