在另一个元素之后添加HTML元素

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" .. /> ?

Answer 1

使用.after()吗？

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

Answer 2

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

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