DOM的createElement的坑

<body>
    <div>
        <p id="p1">p1</p>
        <p id="p2">p2</p>
        <p id="p3">p3</p>
    </div>
</body>
<script>

    var div = document.getElementsByTagName("div");

    //创建一个子节点
    var child = document.createElement("div");
    child.innerHTML = "newDiv";

    //替换子节点
    div[0].appendChild(child);//添加子节点

    div[0].replaceChild(child,document.getElementById('p1'));

</script>

出现的效果是：

刚开始看到这代码的时候，还以为会出现两个newDiv，代码都运行了，为啥只出现一个，后来，才发现，

 createElement()只创建了一个 应该所有的操作都是创建在一个newDIv上的。

后来，再替换子节点之后，又创建了一个节点，效果就是这样的啦；