Javascript 在jQuery中使用纯JS包装类似Wrap（）函数的元素

试图将每个按钮包装在一个div（class='gp'）中。如何使用纯JavaScript实现这一点。

HTML

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();

函数fixjsf（）{ var parent=document.getElementsByClassName（“af按钮组对齐”）； var elementscont=parent.length；

---

对于（var i=0；i，使用innerHTML您可以

这是你的电话号码

我修改了js函数，如下所示

    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++) {           
            if (parent[i].childNodes[j].nodeName == "BUTTON") {
                var clone = parent[i].childNodes[j].outerHTML;
                elementContent += "<div class='gp'>" + clone + "</div>";
            }
        }
        parent[i].innerHTML = elementContent;

    }
}

fixjsf();

函数fixjsf（）{ var parent=document.getElementsByClassName（“af按钮组对正”）； var elementscont=parent.length； 对于（变量i=0；i那么：

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);
        }
    }
}

函数fixjsf（）{ var parent=document.getElementsByClassName（“af按钮组对齐”）； var elementscont=parent.length；

---

对于（var i=0；i虽然您已经接受了一个答案，但我想我应该提供一个替代方案（希望它的功能类似于jQuery的

wrap（）

）：

NodeList.prototype.wrap=函数（包装器）{
//创建包含HTML字符串（“包装器”）的临时元素：
var temp=document.createElement（'div'），
//对第一个节点的父节点的引用：
父节点=此[0]。父节点，
//对新创建节点应插入位置的引用：
insertWhere=此[0]。以前的同级，
//缓存变量：
目标；
//将临时元素的innerHTML设置为传入的内容：
temp.innerHTML=包装器；
//获取对传入的HTML字符串中最外层元素的引用：
目标=临时第一个孩子；
//对传入字符串最深节点的简单搜索：
while（target.firstChild）{
target=target.firstChild；
}
//在每个节点上迭代：
[]forEach.call（此函数为a）{
//将这些节点中的每一个追加到传入字符串的最深节点：
目标：儿童（a）；
});
//在第一个节点的前一个同级节点之前插入创建的节点
//节点（如果有），或在父节点的第一个子节点之前：
parent.insertBefore（temp.firstChild，（insertWhere？insertWhere.nextSibling:parent.firstChild））；
}
//检索所选节点并对其调用“wrap（）”方法：
document.queryselectoral（'button.af button'）.wrap（''）；

参考资料：

另一个具有

函数fixjsf（）{ var parent=document.getElementsByClassName（“af按钮组对齐”）； var elementscont=parent.length；

---

对于（var i=0；iyes）按钮（只有在…）你能提供预期的结果吗？我想我的意思是包装每个按钮如何包装每个按钮？啊..我明白了..我更新了我的答案并用小提琴完美了这就是我需要的var child=parent[i]。removeChild（children[0]）；这一行在做什么？@Hanze:它正在从父对象中删除第一个子对象。由于

getElementsByTagName

返回的集合是“活动”的，因此当您将其追加回时，它将转到集合的后面。因此您可以始终只删除第一个子对象。这是一个很好的解决方案。但是，您不需要删除子对象。

<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>

    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++) {           
            if (parent[i].childNodes[j].nodeName == "BUTTON") {
                var clone = parent[i].childNodes[j].outerHTML;
                elementContent += "<div class='gp'>" + clone + "</div>";
            }
        }
        parent[i].innerHTML = elementContent;

    }
}

fixjsf();

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);
        }
    }
}

NodeList.prototype.wrap = function (wrapper) {
    // creating a temporary element to contain the HTML string ('wrapper'):
    var temp = document.createElement('div'),
    // a reference to the parent of the first Node:
        parent = this[0].parentNode,
    // a reference to where the newly-created nodes should be inserted:
        insertWhere = this[0].previousSibling,
    // caching a variable:
        target;

    // setting the innerHTML of the temporary element to what was passed-in:
    temp.innerHTML = wrapper;

    // getting a reference to the outermost element in the HTML string passed-in:
    target = temp.firstChild;

    // a naive search for the deepest node of the passed-in string:        
    while (target.firstChild) {
        target = target.firstChild;
    }

    // iterating over each Node:
    [].forEach.call(this, function(a){
        // appending each of those Nodes to the deepest node of the passed-in string:
        target.appendChild(a);
    });

    // inserting the created-nodes either before the previousSibling of the first
    // Node (if there is one), or before the firstChild of the parent:
    parent.insertBefore(temp.firstChild, (insertWhere ? insertWhere.nextSibling : parent.firstChild));

}

// retrieving a selection of Nodes and calling the 'wrap()' method upon them:
document.querySelectorAll('button.af-button').wrap('<div></div>');

function fixjsf(){
    var parent = document.getElementsByClassName("af-button-group-justified");
    var elementsCount = parent.length;
    for(var i=0; i<elementsCount; i++){
        var childLen = parent[i].childNodes.length;
        for(var j=0; j<childLen; j++){
            var child = parent[i].childNodes[j];
            if(child instanceof HTMLElement){
                var wrap = document.createElement('div');
                wrap.className = 'gp';
                wrap.appendChild(child.cloneNode(true));
                parent[i].replaceChild(wrap,child);              
            }
        }
    }
}