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

我收到此错误：类型错误：无法读取属性 'insertBefore' of null

我做错了什么？ :/

Answer 1

我想，变量 (currentIndex/marginTop) 在用值初始化之前被引用了。

Answer 2

好吧，我将您的代码修改为可以在此页面上测试的工作条件，因为您没有提供任何游乐场 link 或代码的其余部分...所以在这里:

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

jQuery 创建 div 的函数，在 JavaScript 中重写无效

jQuery function which creates div, rewritten in JavaScript not working

javascript

jquery

dom