JavaScript ES6 to basic javascript

Question

I created two jquery scripts that move my children from my parent and remove this class, and created.

1) add a new class:

    let groups = $(".st-footer--navigation");

    let child = groups.find(".st--footer-column");

    if (!child.length) {
        let groups = $(".st-footer--navigation");

        for (let i of groups) {
            let childrens = i.children;
            let stFooterColumn = document.createElement("div");

            // add the class
            stFooterColumn.classList.add("st--footer-column");

            // add each child to the new div
            while (childrens.length) {
                stFooterColumn.appendChild(childrens[0])
            }

            // append the div to previews to group
            i.appendChild(stFooterColumn)
        }
    }

2) remove class:

    let sts = document.getElementsByClassName("st--footer-column");

    for (let i of sts) {
        while (i.childElementCount) {
            i.parentNode.appendChild(i.firstElementChild)
        }
        i.parentNode.removeChild(i)
    }

This code is written in es6. I would like, that this codes were created by this older standard, in a different way, but to do the same. My code needs to use foreach loops. How can I solve this problem?

Answer 1

You can compile ES6 to earlier versions using a tool such as babel

You can find a tutorial in its docs

Answer 2

For iteration your jquery object groups or sts you can use each api . And code in such way

groups.each(function() {
  let childrens = this.children;
  let stFooterColumn = document.createElement("div");
  stFooterColumn.classList.add("st--footer-column");
  while (childrens.length) {
         stFooterColumn.appendChild(childrens[0])
  }
  this.appendChild(stFooterColumn)
});
//----------
sts.each(function() {
    while (this.childElementCount) {
         this.parentNode.appendChild(this.firstElementChild);
    }
    this.parentNode.removeChild(this);
});