How to append a div element between form elements

  append, dom, forms, javascript, validation

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 🙂

Source: Ask Javascript Questions

LEAVE A COMMENT