开发者社区> 问答> 正文

HTML界面,如何通过js函数来实现从界面中的指定行(比如第五行)开始插入新的行(行数不固定)?

小旋风柴进 2016-03-12 14:15:40 1102

HTML界面,如何通过js函数来实现从界面中的指定行(比如第五行)开始插入新的行(行数不固定)?

分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:00:45

    请采纳!!

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    
    </head>
    <body>
    <div id="container">
        <p>iam line 1</p>
        <p>iam line 2</p>
        <p>iam line 3</p>
        <p>iam line 4</p>
        <p>iam line 5</p>
        <p>iam line 6</p>
    </div>
    </body>
    
    <script type="text/javascript">
    
        //将node插入parent节点的第i个元素之后
        function insertAfter(parent,i,node) {
            if(i < 0 || !node ||!parent)
                return;
            if(parent.children && parent.children.length >= i) {
               parent.insertBefore(node,parent.children[i]);
            }else{
                parent.appendChild(node);
            }
        }
    
        var container = document.getElementById("container");
    
        //创建一个"<p>我是新插入的~</p>"
        var newNode = document.createElement("p");
        var txtNode = document.createTextNode("我是新插入的~");
        newNode.appendChild(txtNode);
    
        //调用
        insertAfter(container,5,newNode);
    </script>
    
    </html>
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程