Wait for render element to load

I have been trying to make a few small changes to the custom widget in order to meet business requirements. This includes a number of things, but for the sake of simplicity, I will focus this question on adding a subtitle to the Unlock Account screen to be more descriptive for the user. So using document.load, I append a paragraph below the h2 title using jquery. It works great the first time, but once you go back to the main login screen, and then back to unlock account, the subtitle disappears.

I had previously tried several things to create an async await function in order to wait for the elements to render, but I am not too savvy with that and don’t quite understand how Okta’s widget renders. Here is the code I use for rendering the widget and modifying the title:

 `// Render the Okta Sign-In Widget
  var oktaSignIn = new OktaSignIn(config);
  oktaSignIn.renderEl(
    { el: "#okta-login-container" },
    OktaUtil.completeLogin,
    function (error) {
      // Logs errors that occur when configuring the widget.
      // Remove or replace this with your own custom error handler.
      console.log(error.message, error);
    });
  $(document).ready(function () {
    $('.account-unlock h2').append('<p>Please enter your email address and click submit in order to request a password reset email.</p>')});`

Elements disappearing is a JS issue. Are you placing your JS at the end of the HTML file just before </body>?

At the end of the JS file. I found the afterrender event and moved my code there. That seems to be working. See https://github.com/okta/okta-signin-widget#afterrender.