Javascript 立即替换DOM中的某一组元素

假设我有一个由这个html表示的DOM树

霍格

福加
皮约
福巴

如果我想用

替换所有的

，我该如何实现

const replaceElements = () => {
  const page = document.getElementById("root")
  const elements = document.getElementsByTagName('span');
  elements.forEach(item => ???)
}

---

它不断获取第一个

span

并将其转换为一个按钮，直到在span的innerHTML周围用按钮标记替换元素，不再有

span

s。查看代码片段。（在铬76中测试）

const replaceElements=（）=>{
常量元素=document.getElementsByTagName（'span'）；
while（elements.length>0）{
常量项=元素[0]；
item.outerHTML=''+item.innerHTML+''；
}
}

const replaceElements=（）=>{
常量元素=document.getElementsByTagName（'span'）；
while（elements.length>0）{
常量项=元素[0]；
item.outerHTML=''+item.innerHTML+''；
}
}
替换元素（）

霍格

福加
皮约
福巴
它不断获取第一个
span
并将其转换为一个按钮，直到不再有
span
为止，方法是在span的innerHTML周围用按钮标记替换元素。查看代码片段。（在铬76中测试）

const replaceElements=（）=>{
常量元素=document.getElementsByTagName（'span'）；
while（elements.length>0）{
常量项=元素[0]；
item.outerHTML=''+item.innerHTML+''；
}
}


const replaceElements=（）=>{
常量元素=document.getElementsByTagName（'span'）；
while（elements.length>0）{
常量项=元素[0]；
item.outerHTML=''+item.innerHTML+''；
}
}
替换元素（）

霍格

福加
皮约
福巴
按照设置方式，您需要为找到的每个跨距将跨距的innerHTML分配到新的按钮元素中。试试这个：

const replaceElements = () =>{
    //get all span elements
    var spans = document.querySelectorAll("span");

    // loop over all of them
    for(let i=0; i<spans.length;i++){

        // create the new btn and get the parent
        var newBtn = document.createElement("button"),
        parent = spans[i].parentNode;

        // set innerhtml of btn
        newBtn.innerHTML = spans[i].innerHTML;

        // replace the node in the parent container
        parent.replaceChild(newBtn,spans[i]);
    }
}

const replaceElements=（）=>{
//获取所有跨度元素
var span=document.querySelectorAll（“span”）；
//把它们都绕过去
对于（设i=0；i的设置方式，您需要为找到的每个跨距将跨距的innerHTML分配到新的按钮元素中。请尝试以下操作：

const replaceElements = () =>{
    //get all span elements
    var spans = document.querySelectorAll("span");

    // loop over all of them
    for(let i=0; i<spans.length;i++){

        // create the new btn and get the parent
        var newBtn = document.createElement("button"),
        parent = spans[i].parentNode;

        // set innerhtml of btn
        newBtn.innerHTML = spans[i].innerHTML;

        // replace the node in the parent container
        parent.replaceChild(newBtn,spans[i]);
    }
}

const replaceElements=（）=>{
//获取所有跨度元素
var span=document.querySelectorAll（“span”）；
//把它们都绕过去
对于（设i=0；i的可能重复项i希望一次替换所有标记，因此与问题不同。（虽然答案只是使用循环。）的可能重复项i希望一次替换所有标记，因此与问题不同。（虽然答案只是使用循环。）我已经更正了拼写错误，谢谢。此外，使用while似乎很有趣，很容易理解，因此：）我已经更正了拼写错误，谢谢。此外，使用while似乎很有趣，很容易理解，因此：）