How to access element from html that is stored in variable?

Question

I have HTML that is stored in a variable. I am trying to figure out how do I access it. Fo example if I want to get element values by id or class name or apply validation on the form, is it possible?

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

You can do this by using 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>