未捕获的TypeError：无法在'Node'上执行'insertBefore'：参数1不是'Node'类型

Question

在这个Dom操作上遇到错误

var prependData = $('#income_ranges').children().first().clone();
var prependedData = $('#income_ranges').children().last();
var list = document.getElementById("income_ranges");
list.insertBefore(prependData, prependedData);

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

我运行此代码时出错，我不知道为什么。 任何帮助表示赞赏。

Answer 1

现在无法测试，但我很确定你得到这个错误，因为你在jQuery对象和vanilla JS对象之间切换。 在jQuery对象上使用.get()来获得它的vanilla对应物（参见文档 ）。

所以将最后一行改为：

list.insertBefore(prependData.get(0), prependedData.get(0));

或者去完整的jQuery（在我看来更漂亮）：

var prependData = $('#income_ranges > :first-child').clone();
var prependedData = $('#income_ranges > :last-child');
prependData.insertBefore(prependedData);

Answer 2

您要添加到insertBefore（）的元素是jQuery对象，而不是本机DOM对象，这正是它所期望的。 您可以通过将prependData和prependedData都转换为其本机类型来解决此问题。

 var prependData = $('#income_ranges').children().first().clone()[0]; var prependedData = $('#income_ranges').children().last()[0]; var list = document.getElementById("income_ranges"); list.insertBefore(prependData, prependedData); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="income_ranges"> <span> Hello </span> </div> 

参考