Wrap an element like wrap() function in jQuery, with pure JS

Question

Trying to wrap each buttons in a div (class='gp'). how to do this with pure JavaScript.

HTML

<div class="af-button-group af-button-group-justified">
    <button class="af-button af-button-lg af-button-danger">sds</button>
    <button class="af-button af-button-lg af-button-ok">sdsasas</button>
    <button class="af-button af-button-lg">sds</button>
</div>

CSS

.gp{
    background: blue;
    padding: 8px;
}

JavaScript

function fixjsf(){
    var parent = document.getElementsByClassName("af-button-group-justified");
    var elementsCount = parent.length;
    for(var i=0; i<=elementsCount; i++){
        var childCount = parent[i].childNodes.length;
        var elementContent = "";
        for(var j=0; j<=childCount; j++){
            var clone = parent[i].childNodes[j].cloneNode(true);
            elementContent += "<div class='gp'>"+clone+"</div>";
        }
        parent[i].innerHTML = elementContent;
    }
}
fixjsf();

Expecting the dom to look like this

<div class="af-button-group af-button-group-justified">
    <div class='gp'>
    <button class="af-button af-button-lg af-button-danger">sds</button>
    </div>
    <div class='gp'>
    <button class="af-button af-button-lg af-button-ok">sdsasas</button>
    </div>
    <div class='gp'>
    <button class="af-button af-button-lg">sds</button>
    </div>
</div>

JSFiddle

Answer 1

How about:

function fixjsf(){
    var parent = document.getElementsByClassName("af-button-group-justified");
    var elementsCount = parent.length;
    for(var i=0; i<elementsCount; i++){
        var children = parent[i].getElementsByTagName("button");
        for(var j=0; j < children.length; j++){
            var child = parent[i].removeChild(children[0]);
            var wrap = document.createElement("div");
            wrap.className = "gp";
            wrap.appendChild(child);
            parent[i].appendChild(wrap);
        }
    }
}

http://jsfiddle.net/7vhfvakL/7/

for each parent, we grab all the buttons under it (alternatively you could select by class name) and then we remove each child, create a wrapper div, attach the child to the wrapper and attach the wrapper back to the parent.

Or...you could just use the wrap function in jQuery.