如何从存储在变量中的html访问元素？

Question

我有存储在变量中的 HTML。 我试图弄清楚如何访问它。 例如，如果我想通过 id 或类名获取元素值或在表单上应用验证，有可能吗？

 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 >';

Answer 1

您可以使用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>