Uncaught TypeError: Не удалось выполнить «InsertBefore» на «Node»: параметр 1 не типа «Узел»

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 и объектами JS Vanilla. Используйте .get() на объекте jQuery, чтобы получить его ванильный аналог (см. 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 в их родные типы.

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>

Reference