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（参见documentation）。

所以将最后一行改为：

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都转换为其本机类型来解决此问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Reference

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

2 个答案: