jquery insertBefore works differently than JavaScript

[scottg521]

I tried using spin.js in an Angular JS application, where elements are jquery objects. Jquery seems to have an .insertBefore function that inserts the parameter BEFORE (i.e. as a parent of) the target. That meant that when the spinner element was removed, it took out the whole DOM tree where my grid was displayed.

Jquery .prepend does what JavaScript's .insertBefore does, so changing

if (target) {
  target.insertBefore(el, target.firstChild || null)
}

to

if (target) {
  target.prepend(el)
}

solved my problem...but because it is supposed to work with or without jquery, I was surprised that I needed that. Perhaps checking for a jquery element and using a different statement if found would be wise.

[fgnass]

Spin.js expects a raw DOM element as target, not a jQuery or Angular wrapper. Use new Spinner().spin(angularElement[0]) instead of new Spinner().spin(angularElement) and you should be fine. insertBefore btw is the DOM API, not jQuery in this case: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

[viniciusllima]

The problem happened to me when I set my target using document.getElementsByClassName and not document.getElementById instead.

I solved my problem using getElementById to set the target.

[MattMcMurray]

@viniciusllima I had the same issue when selecting by class name. The difference is that getElementsByClassName() is returning an array, whereas getElementById() returns a single element. Solve this problem by using document.getElemensByClassName()[0]