jquery add an element next to an input element

Question

I have this html inputs.

<input type='text' class='req-in' name='fname'>
<input type='text' class='req-in' name='lname'>

I am trying to do to add somr element next to the input field. I tried append() and prepend() but it goes wrong.

this is my code:

$('.req-in').blur(function() {
        $(this).append('<p>some text here for this field only!</p>');   
    });

is this possible? my ideal output would be like this

<input type='text' class='req-in' name='fname'><p>some text here for this field only!</p>
<input type='text' class='req-in' name='lname'>

Milind Anantwar · Accepted Answer · 2015-04-08 07:56:23Z

4

You need to use .after() method.

Insert content, specified by the parameter, after each element in the set of matched elements.

$('.req-in').blur(function() {
    $(this).after('<p>some text here for this field only!</p>');   
});

or .insertAfter()

Insert every element in the set of matched elements after the target.

$('.req-in').blur(function() {
 $('<p>some text here for this field only!</p>').insertAfter($(this));
});

edited Apr 8, 2015 at 7:56

answered Apr 8, 2015 at 7:55

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Milind Anantwar Over a year ago

Drummer beating drummer :)

Anto S · Accepted Answer · 2015-04-08 08:23:21Z

0

Try this one

    <!DOCTYPE html>
<html>
<title>Stack HTML</title>
<link rel="stylesheet" href="../repo/css/bootstrap.css" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="../repo/js/bootstrap.js"></script>
<script src="../repo/js/jquery.validate.js"></script>
<head></head>
<body>

    <input type='text' class='req-in' name='fname'>
    <input type='text' class='req-in' name='lname'>

    <script>
        $(document.body).on('blur', '.req-in' ,function(){
            $(this).after('<p>some text here for this field only!</p>');
        });
    </script>
</body>
</html>

edited Apr 8, 2015 at 8:23

answered Apr 8, 2015 at 8:06

Anto S

2,4576 gold badges35 silver badges52 bronze badges

Collectives™ on Stack Overflow

jquery add an element next to an input element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related