Функция jQuery, которая создает div, переписанная на JavaScript не работает

Question

У меня есть эта функция, которая написана в jQuery и создает div для выбранного элемента.

var createPlaceholder = function createPlaceholder(height) { 
    return $('<div></div>').css({ 
     height: height + 'px', 
     marginTop: (currentIndex > 0 ? -marginTop : -1) + 'px' 
    }) 
    .addClass('placeholder'); 
}; 

И тогда называется так:

placeholderHeight = dragging.outerHeight() + marginTop; 
placeholder = createPlaceholder(placeholderHeight); 
placeholder.insertAfter(dragging); 

Теперь чистый JS материал! Я пытаюсь сделать то же самое, но без jQuery, но я всегда получаю неопределенные ошибки и проблемы с родителями. Это то, что я сделал на сегодняшний день:

var createPlaceholder = function createPlaceholder(height) { 
    var div = document.createElement('div'); 
     div.style.height = height + 'px'; 
     div.style.marginTop = (currentIndex > 0 ? -marginTop : -1) + 'px'; 
     div.setAttribute('class', 'placeholder'); 

     document.body.appendChild(div); 
    }; 

placeholderHeight = dragging.outerHeight() + marginTop; 
placeholder = createPlaceholder(placeholderHeight); 
placeholder.parentNode.insertBefore(placeholder,dragging.nextSibling); 

Пробовал так:

placeholderHeight = dragging.outerHeight() + marginTop; 
var div = document.createElement('div'); 
    div.style.height = placeholderHeight + 'px'; 
    div.style.marginTop = (currentIndex > 0 ? -marginTop : -1) + 'px'; 
    div.setAttribute('class', 'placeholder'); 

    div.parentNode.insertBefore(div, dragging[0].nextSibling); 

я получаю эту ошибку: TypeError: Не удается прочитать свойство «InsertBefore» в нуль

Что я делаю неправильно? :/

Answer 1

Ну, я изменил свой код в рабочее состояние, которое может быть проверено на этой самой странице, потому что вы не поставить какой-либо связи площадка или оставшуюся часть кода ... так вот она:

var dragging = document.getElementById('question-header'); 


var createPlaceholder = function createPlaceholder(height) { 
    var div = document.createElement('div'); 
    div.style.cssText = 'height:' + height + 'px; margin-top:' + (currentIndex > 0 ? -marginTop : -1) + 'px'; 
    div.className = 'placeholder'; 

    return div; 
}; 

placeholderHeight = dragging.clientHeight + 10; 
placeholder = createPlaceholder(placeholderHeight); 
dragging.parentNode.insertBefore(placeholder,dragging.nextSibling); 

Answer 2

Я думаю, что переменные (currentIndex/marginTop) ссылаются до того, как они были инициализированы значением.