execute function after a dynamic div is loaded

Question

How do I make a JavaScript execute after a div section on the page is loaded? By using only standard JavaScript.

Here is the div section in question, extracted from (https://hera-warm-demo.mybigcommerce.com/checkout):

<div aria-busy="false" class="checkout-view-content checkout-view-content-enter-done">
  <div class="loading-skeleton">
    <div>
      <form class="checkout-form" data-test="payment-form" novalidate="">
        <fieldset class="form-fieldset">
          <div class="form-body">
            <ul class="form-checklist optimizedCheckout-form-checklist">
              <li class="form-checklist-item optimizedCheckout-form-checklist-item form-checklist-item--selected optimizedCheckout-form-checklist-item--selected">
                <div class="form-checklist-header form-checklist-header--selected">
                  <div class="form-field">
                    <label for="radio-bigpaypay" class="form-label optimizedCheckout-form-label">
                      <div class="paymentProviderHeader-container">
                        <div class="paymentProviderHeader-nameContainer" data-test="payment-method-bigpaypay">
                          <div aria-level="6" class="paymentProviderHeader-name" data-test="payment-method-name" role="heading">Test Payment Provider</div>
                        </div>
                        <div class="paymentProviderHeader-cc">
                          <ul class="creditCardTypes-list"></ul>
                        </div>
                      </div>
                    </label>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

This section is the last section on the page, and it only loads when the customer clicks "Continue" button from the previous section.

Here is the code I tried which didn't work.. I was expecting the JavaScript to execute after "checkout-view-content" div is loaded.

Note that I cannot include the script in the dynamically loaded HTML markup, I can only inject a JavaScript code.

<script>
document.getElementsByClassName("checkout-view-content").addEventListener("DOMContentLoaded", (event) => {
document.querySelector('label[for="radio-bigpaypay"] .paymentProviderHeader-cc').style.visibility = "hidden";
});
</script>

Answer 1

Here is a pure CSS answer that shows you can change the visibility without needing javascript. My answer does include javascript just to show that the CSS still will apply to dynamic elements.

label[for="radio-bigpaypay"] .paymentProviderHeader-cc{visibility:hidden}

UPDATE:

Due to platform limitations, I have updated my answer. Now I'm creating a style element, adding the CSS to it then attaching it to the head.

Its not a perfect solution, but should still do the trick. You can always use visibility:hidden !important if you need ti.

var sheet = document.createElement('style')
sheet.innerHTML = 'label[for="radio-bigpaypay"] .paymentProviderHeader-cc{visibility:hidden}';
document.head.appendChild(sheet);

const results = document.querySelector("#results");

results.innerHTML = `<div aria-busy="false" class="checkout-view-content checkout-view-content-enter-done">
  <div class="loading-skeleton">
    <div>
      <form class="checkout-form" data-test="payment-form" novalidate="">
        <fieldset class="form-fieldset">
          <div class="form-body">
            <ul class="form-checklist optimizedCheckout-form-checklist">
              <li class="form-checklist-item optimizedCheckout-form-checklist-item form-checklist-item--selected optimizedCheckout-form-checklist-item--selected">
                <div class="form-checklist-header form-checklist-header--selected">
                  <div class="form-field">
                    <label for="radio-bigpaypay" class="form-label optimizedCheckout-form-label">
                      <div class="paymentProviderHeader-container">
                        <div class="paymentProviderHeader-nameContainer" data-test="payment-method-bigpaypay">
                          <div aria-level="6" class="paymentProviderHeader-name" data-test="payment-method-name" role="heading">Test Payment Provider</div>
                        </div>
                        <div class="paymentProviderHeader-cc">
                        HIDE ME
                          <ul class="creditCardTypes-list"></ul>
                        </div>
                      </div>
                    </label>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>`;

<div id="results"></div>