Recibo la siguiente respuesta json de una API de validación, el primer atributo es la identificación de cada campo de entrada con el mensaje de error.
{ "backgroundcolor": "Color is not Supported", "terms" : "Sorry the Terms are blank" }Estoy usando jquery y bootstrap y quiero agregar el html a continuación justo después de cada campo de entrada de esa identificación específica. ¿Es posible agregar div dinámicamente?
<div id="backgroundcolor" class="invalid-feedback"> Color is not Supported </div>Antes :
<div class="col-md-6"> <input type="text" class="form-control is-invalid" id="backgroundcolor" aria-describedby="validationServer03Feedback" required> </div>Después :
<div class="col-md-6"> <input type="text" class="form-control is-invalid" id="backgroundcolor" aria-describedby="validationServer03Feedback" required> <div id="backgroundcolorFeedBack" class="invalid-feedback"> Color is not Supported. </div>Solo JavaScript es la mejor y más rápida solución, así que aquí está cómo lo haría:
let response = JSON.parse(response); let fragment = document.createDocumentFragment() let child = document.createElement('div'); child.id = Object.keys(response)[0] + 'FeedBack'; child.className = 'invalid-feedback'; child.innerText = Object.values(response)[0]; fragment.appendChild(child); document.getElementById(Object.keys(response)[0]).after(fragment);Espero que ayude.
Nota: createDocumentFragment() puede ser un poco más rápido que solo createElement, pero no es obligatorio.
Editar: también puede verificar si ya hay div con ese error, evitaría la duplicación de divs
if(!document.getElementById(Object.keys(response)[0].length) { // Here goes code from above }