未捕获的TypeError: Failed to execute 'insertBefore'on &#

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

本文关键字：insertBefore on execute to TypeError Failed      更新时间：2023-09-26

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'.

我得到一个错误，当我运行这段代码，我不知道为什么。

现在不能测试，但我很确定你得到这个错误，因为你在jQuery对象和香草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);

您添加到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>

参考

相关文章：