How to append a div element between form elements

Question

I tried to search a lot but was unable to find the answer ,I want to append a div between two form input element as show in the below code in comment ↓↓↓

<div class="contact-form-box">
    <form class="contact-form" action="/contact" method="POST" enctype="text/plain">
        <input class="form-elements name-input" id="name" autocomplete="off" type="text" placeholder="Enter Your Name">
        <!-- <div class="invalid-feedback"><p>Please type your proper name.</p></div> -->
        <input class="form-elements email-input" id="email" autocomplete="off" type="text" placeholder="Enter Your E-mail">
        <textarea class="form-elements contact-textarea" id="message" rows="3" type="text" placeholder="Enter Your Message"></textarea>
        <button class="form-elements submit-btn" type="submit">Submit</button>
    </form></div>

I have tried this code to do with the below code but this code appends the my div element inside input instead of appending after input element.

        const invalidFeedback=document.createElement("div");
        invalidFeedback.className="invalid-feedback";
        invalidFeedback.innerHTML="<p>This is heaven</p>"
        // document.getElementsByClassName("contact-form")[0].appendChild(invalidFeedback);
        document.getElementsByClassName("contact-form")[0].appendChild(invalidFeedback);
        //console.log(document.getElementsByClassName("contact-form")[0].firstChild.nextElementSibling.appendChild(invalidFeedback));

if anyone has a clever answer for it then kindly help me out :) Edit: as in comments @Stefino said that i must keep a empty span and then add innertext or innerHtml to it but is it legit way?

Does this answer your question? https://stackoverflow.com/questions/41424994/how-to-add-a-div-between-two-divs-by-javascript — SatvikVejendla, Jun 11 '21 at 17:53
Why simply don't put a void span with a specific Id between the two inputs and then fill it with JavaScript by document.getElemntById? — Stefino76, Jun 11 '21 at 17:53
@satvikVejendla i have already seen that question ,thanks for help but that question isnt solving my problem:) — Neel Kotkar, Jun 11 '21 at 18:23
Yes, but it depends from what is your goal. If you only want to show one static error message, you can write the complete div with attribute display:none and only set display value to block when you want to show it. Bootstrap too use this method. Elsewhere you can do what I've suggest to you in my first answer with the void span. Both solutions are common used. — Stefino76, Jun 11 '21 at 20:42

How to append a div element between form elements

0 Answers0