Tengo HTML que está almacenado en una variable. Estoy tratando de averiguar cómo puedo acceder a él. Por ejemplo, si quiero obtener valores de elementos por id o nombre de clase o aplicar validación en el formulario, ¿es posible?
template = ' \ <div id = "newContact" style = "display:grid;grid-template-columns:1fr 2fr;grid-row-gap:5px; margin-top:40px; margin-right:20px" class="contact-validation" > \ <label style="padding:6px" for="form-email validation-email">Email</label> <input class="form-control" type="email" data-bind="value: email" id="form-email validation-email" required/><div class=invalid-feedback>Please enter email</div> \ <label style="padding:6px" for="form-mobile validation-mobile">Mobile</label> <input class="form-control" type="tel" data-bind="value: mobile" id="form-mobile validation-mobile" required/> \ <label style="padding:6px" for="form-work validation-work">Work</label> <input class="form-control" type="text" data-bind="value: work" id="form-work form-email validation-work" required/> \ <label style="padding:6px" for="form-home validation-home">Home</label> <input class="form-control" type="text" data-bind="value: home" id="form-home validation-home" required/> \ <label style="padding:6px" for="form-fax validation-fax">Fax</label> <input class="form-control" type="text" data-bind="value: fax" id="form-fax validation-fax" required/> \ <label style="padding:6px" for="form-Alt1 validation-Alt1">Alt1</label> <input class="form-control" type="text" data-bind="value: alt1" id="form-Alt1 validation-Alt1" required/> \ <label style="padding:6px" for="form-Alt2 validation-Alt2">Alt2</label> <input class="form-control" type="text" data-bind="value: alt2" id="form-Alt2 validation-Alt2" required/> \ <label style="padding:6px" for="form-Note validation-Note">Note</label> <input class="form-control" type="text" data-bind="value: note" id="form-Note validation-Note" required/> \ </div >';Puedes hacer esto usando DOMParser .
template = ` \ <div id = "newContact" style = "display:grid;grid-template-columns:1fr 2fr;grid-row-gap:5px; margin-top:40px; margin-right:20px" class="contact-validation" > \ <label style="padding:6px" for="form-email validation-email">Email</label> <input class="form-control" type="email" data-bind="value: email" id="form-email validation-email" required/><div class=invalid-feedback>Please enter email</div> \ <label style="padding:6px" for="form-mobile validation-mobile">Mobile</label> <input class="form-control" type="tel" data-bind="value: mobile" id="form-mobile validation-mobile" required/> \ <label style="padding:6px" for="form-work validation-work">Work</label> <input class="form-control" type="text" data-bind="value: work" id="form-work form-email validation-work" required/> \ <label style="padding:6px" for="form-home validation-home">Home</label> <input class="form-control" type="text" data-bind="value: home" id="form-home validation-home" required/> \ <label style="padding:6px" for="form-fax validation-fax">Fax</label> <input class="form-control" type="text" data-bind="value: fax" id="form-fax validation-fax" required/> \ <label style="padding:6px" for="form-Alt1 validation-Alt1">Alt1</label> <input class="form-control" type="text" data-bind="value: alt1" id="form-Alt1 validation-Alt1" required/> \ <label style="padding:6px" for="form-Alt2 validation-Alt2">Alt2</label> <input class="form-control" type="text" data-bind="value: alt2" id="form-Alt2 validation-Alt2" required/> \ <label style="padding:6px" for="form-Note validation-Note">Note</label> <input class="form-control" type="text" data-bind="value: note" id="form-Note validation-Note" required/> \ </div >` let parser = new DOMParser, doc = parser.parseFromString(template, 'text/html') // Examples: document.querySelector('div').innerHTML = doc.querySelector('#newContact').innerHTML console.log(doc.querySelector('[for="form-email validation-email"]').innerText) <div> </div>