I have a form in one of my apps:
<div class="custom-form-field">
<label>
Email
<span class="required-asterix"></span>
</label>
<input name="email" class="email" type="email" placeholder="Work Email" tabindex="0" value="">
</div>
I have the ability to run a custom script in the header or the body of the page, and I would like to change the label from "Email" to "Company email".
Any suggestions? Thanks
To match an element by its contents you'll need to use XPath.
let emailLabels = document.evaluate( "//div[contains(@class, 'custom-form-field')]/label[contains(., 'Email')]", document, null, XPathResult.ANY_TYPE, null );
let label = emailLabels.iterateNext();
label.innerText = "Company Email";<div class="custom-form-field">
<label>
Email
<span class="required-asterix"></span>
</label>
<input name="email" class="email" type="email" placeholder="Work Email" tabindex="0" value="">
</div>If you want to use native javascript, can try this:
<div class="custom-form-field"><label>Email<span class="required-asterix"></span></label><input name="email" class="email " type="email" placeholder="Work Email" tabindex="0" value=""></div>
<script>
custom_field = document.getElementsByClassName('custom-form-field');
custom_field[0].children[0].outerText = 'Company Email';
</script>