I'm currently working with a Wordpress plugin. I have amended one of the plugin files by adding some simple HTML code and a PHP variable associated with the plugin. Essentially duplicating a piece of code already in the file so I can repurpose the code using simple CSS.

(Essentially, the plugin dynamically displays the grand total of a product as different features are added. I just needed to duplicate this and display it as a fixed banner, so nothing in the plugin file I have added is new or changes the way the plugin functions.)

I'd like to be able to append this code using javascript so that when I update the plugin, my changes won't be lost.

This is what I have so far but I've had no success so far

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("div");
el.innerHTML = "<div class="gt-banner-message">
    <div class="total-wrap">
            <span><?php _e('Grand total: ','advanced-product-fields-for-woocommerce'); ?></span>
            <span class="wapf-grand-total price amount"></span>
        </div>
    </div> ";
var div = document.getElementsByClassName("wapf-product-totals");
insertAfter(div, el);

Can someone let me know where I maybe going wrong here. Any advice much appreciated.