在JavaScript中，我们可以使用replaceChild()方法来实现替换元素。

语法：

A.replaceChild(new,old);

说明：

A表示父元素，new表示新子元素，old表示旧子元素。

举例：

在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                //获取body中的第1个元素
                var oFirst = document.querySelector("body *:first-child");
                //获取2个文本框
                var oTag = document.getElementById("tag");
                var oTxt = document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                var oNewTag = document.createElement(oTag.value);
                var oNewTxt = document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag, oFirst);
            }
        }
    </script>
</head>
<body>
    <p>JavaScript</p>
    <hr/>
    输入标签：<input id="tag" type="text" /><br />
    输入内容：<input id="txt" type="text" /><br />
    <input id="btn" type="button" value="替换" />
</body>
</html>

浏览器预览效果如下图所示。

分析：

当我们在第1个文本框中输入“h1”，在第2个文本框中输入“jQuery”，然后点击【替换】按钮，此时浏览器预览效果如下图所示。

从上面可以知道，想要实现替换元素，就必须提供3个节点：父元素、新元素以及旧元素。