jquery - $(window).bind("load") and $(element).html in pure javascript

Question

I am trying to change this jquery to pure javascript:

var subContainerElement = $('#' + mainContainerId).find('#' + subContainer);

$(window).bind("load", function () {
    $(subContainerElement).html(function (index, text) {

        newParagraphText = text.replace("aaa", "bbb");
        return newParagraphText;
    });        
});

Javascript:

var subContainerElement = mainContainer.getElementsByClassName(subContainer)[0];

document.addEventListener("DOMContentLoaded", function(event) {

    mainContainer.getElementsByClassName(subContainer)[0].innerHTML = 
    function (index, text) {

        newParagraphText = text.replace("aaa", "bbb");                 
        return newParagraphText;
    };
});

Unfortunately, the innerHTML function set the html of the element to be:

function (index, text) { ......

Any help appreciated.

Answer 1

In the jQuery based code, you're looking for an element whose id is subContainer.

Assuming it works, the second one should be

var subContainerElement = document.getElementById(subContainer);
document.addEventListener("DOMContentLoaded", function(event) {
     var html = subContainerElement.innerHTML;
     html = html.replace("aaa", "bbb");
     subContainerElement.innerHTML = html;
});

Note that the first code is very bad, with a very strange element selection and an undeclared variable.