Adding an HTML element after another element

Question

I am using the registration form

<form role="form" id="registrationForm">
    <div class="form-group">
        <h2><span th:text="#{register.title}">Create account</span></h2>
    </div>
    <div class="form-group">
       <label class="control-label" for="username" th:text="#{register.yourUsername}">Your username</label>
       <input name="username" id="username" type="text" maxlength="36" class="form-control" th:placeholder="#{register.username}"/>
    </div>
    <div class="form-group">
       <label class="control-label" for="email" th:text="#{register.email}">E-mail</label>
       <input name="email" id="email" type="email" class="form-control" th:placeholder="#{register.email}"/>
    </div>
...

I validate the form on the server and if there is an error then I return a list of errors in the JSON board.Then I try to insert an error message in the appropriate places on the form.

$.ajax({
        type: 'POST',
        url: '/register',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(registerDTO),
        success: function (result) {
            console.log("SUCCESS");
            window.location.replace("/signIn");
        },
        error: function (error) {
            var obj = JSON.parse(error.responseText);
            for(var i = 0; i < obj.field_errors.length; ++i) {
                var objError = obj.field_errors[i];

                if(objError.field === "reCaptcha") {
                    grecaptcha.reset();
                    console.log('error captcha');
                }
                if(objError.field === "username") {
                    $('#username').append('<label id="username-error" class="error" for="username">' + objError.message + '</label>');
                    console.log('error username');
                }
            }
        }
    });

It is a line

$('#username').append('<label id="username-error" class="error" for="username">' + objError.message + '</label>');

How can I add a label after <input name="username" .. />?

there's already a variable for username as it is the id of an element, so all you need is $(username).after("your html here"); — Daniel Manta
– Daniel Manta, Commented Sep 9, 2017 at 23:27

Louys Patrice Bessette · Accepted Answer · 2017-09-09 23:28:24Z

1

Using .after() ?

$("input[name='username']").after('<label id="username-error" class="error" for="username">' + objError.message + '</label>');

answered Sep 9, 2017 at 23:28

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

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

Comments

Kalaikumar Thangasamy · Accepted Answer · 2017-09-09 23:45:06Z

1

.after() and .insertAfter() methods will do same will add the DOM.

$(target).after(elementInserted)
$(elementInserted).insertAfter(target)

answered Sep 9, 2017 at 23:45

Kalaikumar Thangasamy

5642 silver badges8 bronze badges

Collectives™ on Stack Overflow

Adding an HTML element after another element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related