Question

I am using the following jQuery function to append an element just after an input:

var emailToVal = $("#nameFrom").val();
        if(emailToVal == '') {
            $("#nameFrom").after('<div class="error">Please enter your name.</div>');
            hasError = true;
        }

I need a way to append the element on the right of the input instead than after.

Is there a way to do it?

Answer 1

From what you are saying, it appears the element is being placed in the correct part of the markup, but because a DIV is a block level element it is appearing on a new line.

There are a few ways round this, one of which is to add CSS to set the div to display inline.

Anther option is instead of rendering a DIV, output a LABEL element instead. This gives the added bonus that by adding a FOR attribut to the element you can strongly couple the error message to the textbox.

var emailToVal = $("#nameFrom").val();         
if(emailToVal == '') {             
    $("#nameFrom").append('<label for="nameFrom" class="error">Please enter your name.</label>'); 
    hasError = true;         
}