js实现文本段落增删改查

JS

<script>
            function addNode(){
                var box = document.getElementById("box")
                var p = document.createElement("p")//新建一个p元素
                var txt = document.createTextNode("段落三")
                p.appendChild(txt)//将文字添加到段落中
                box.appendChild(p)//在div中添加一个p元素节点
            }
            
            function inserNode(){//插入一个节点，在当前元素的前面
                var box = document.getElementById("box")
                var h2  =document.createElement("h2")//创建一个二级标题元素
                var txt = document.createTextNode("段落标题")
                h2.appendChild(txt)//将文字放在标题元素中
                var p = document.getElementsByTagName("p")[0]
                box.insertBefore(h2,p)//将h2标题插入到段落一的前面
            }
            
            function updateNode(){//修改节点，将旧的节点换成新的
                var box = document.getElementById("box")
                var p = document.getElementsByTagName("p")[1]//获得第二个段落元素
                var old = p.firstChild//获取第二个段落元素的文本
                var newtxt = document.createTextNode("新段落二")
                p.replaceChild(newtxt,old)//将Ⅸ=旧文本替换成新的
            }
            
            function deleteNode(){
                var box = document.getElementById("box")
                var p =document.getElementsByTagName("p")[0]
                box.removeChild(p)//将段落一删除
            }
        </script>

HTML

<div id="box">
            <p>段落1</p>
            <p>段落2</p>
        </div>
        <a href="javascript:addNode()">添加节点</a>
        <a href="javascript:inserNode()">插入节点</a>
        <a href="javascript:updateNode()">修改节点</a>
        <a href="javascript:deleteNode()">删除节点</a>