javascript核心技术（二十七）原生JS的标签节点操作(三) 替换节点

人亦已歌 · 发表于 2023-1-25 12:58:18

下面我们来看一下如何用一个新的标签替换掉一个已经存在的标签。
它的实现逻辑如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <span id="span1"></span>
        <span id="span1"></span>
        <span id="span1"></span>
    </div>
</body>
<script>
    var newnode=document.createElement("i");//创建一个i标签
    newnode.innerHTML='你好';//给i标签添加内容
    var oldnode=document.getElementById('span1');//获取要替换的标签
    var funode=document.getElementById('box');//获取要替换标签的父标签
    funode.replaceChild(newnode,oldnode);//参数一为替换成的标签，参数二为被替换的标签
</script>
</html>

执行结果如下：