1

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

Improve this question
2
  • 1
    Maybe by using DOMParser? Commented May 13, 2022 at 19:15
  • You can't have spaces in the id. Commented May 13, 2022 at 19:24

1 Answer 1

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.