开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-12 14:15:40 2352 0
1 条回答
写回答
取消 提交回答
  • 请采纳!!

    <!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>
    2019-07-17 19:00:45
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Javascript中的对象 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载