jQuery element works with append() but not after()

Question

I am modifying a script to display a warning on password fields if CAPS lock is on.

The element that I am building is added to the page just fine if I use the append() method but that's not very extensible as it would rely on the password field having a relevant parent element. What I want to do is add it after() the password field but when I do it is displayed as [object Object].

Here's what I have so far:

$(document).ready(function(){
  $(":password").bind("keypress", function(e) {
    el = jQuery('<div/>', {
      id: 'caps_warning',
      text: 'CAPS lock is on'
    })

    kc = e.keyCode ? e.keyCode : e.which;
    sk = e.shiftKey ? e.shiftKey : ((kc == 16) ? true : false);

    if(((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
      el.appendTo(e.currentTarget.parentElement);
    } else {
    }
  });
});

I want to replace el.appendTo(e.currentTarget.parentElement); with e.currentTarget.after(el);.

Answer 1

e.currentTarget is a dom node, not a jQuery object. It is also the same as this

Try

$(this).after(el)