Search code examples
javascriptjqueryhtmlokta

Modify HTML Content Created by 3rd Party JS Script

I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.

I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.

$(document).ready(function(){
var headingClass  = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;

Please could someone advise on how to get this working.

Solution

  • getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]

    Example:

    $(document).ready(function(){
    var headingClass  = document.getElementsByClassName("okta-form-title");
    headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;

    More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName