jQuery, insertBefore, validation, Placement of error message

Question

I am using insertBefore under errorplacement to add validation messages, each one below each other as I want the order of the messages to go from top to bottom.

I am using a hidden input at the very bottom of a parent element in order to supply an element for the insertBefore argument.

Is there a way to insert from the bottom without using the dummy hidden element?

If I use absolute positioning, there is a possibility for white space, for example 3 stacked messages, the middle one missing since there is no collapsing with absolute positioning.

Update

So if I want to insert before "zzz", is there a way do it without "zzz"?

<div>
    <input id="zzz" type="hidden">
</div>

Answer 1

Are you looking for $.append() ?

Answer 2

If you want to insert into the div without the hidden input, you will need to be able to find a reference of the div you want to insert into and then use the $.append() function.

$('ref-to-div').append('<span>message</span>');

Answer 3

I tried append and also appendTo. I agree that they should work, and they do, kind of, but in the context of the validation plugin, for some reason, both functions use the parent of the matched element instead of the matched element and append to the wrong element. Also, the validation wrap function stopped working with append.

I wound up replacing the dummy element and moved up an element that was in use in its place and stuck with insertBefore.

This worked:

errorPlacement: function(error, element) {
    error.insertBefore("#zz")
    error.wrap("<p>")

This didn't - it appended to the parent of #zz and the wrap function didn't work.

errorPlacement: function(error, element) {
   ("#zz").append(error);
   error.wrap("<p>");