html——触发器增加、删除、显示行数

最新推荐文章于 2021-06-21 09:48:57 发布

dongxie_tk

最新推荐文章于 2021-06-21 09:48:57 发布

阅读量845

点赞数

分类专栏： HTML 文章标签： html 脚本 javascript

本文链接：https://blog.youkuaiyun.com/dongxie_tk/article/details/78042778

版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

<html>
    <head>
        <title>1+1=3</title>
            <script type="text/javascript">
           //生成ul
           window.onload = function(){
                var oUi = document.getElementsByTagName("ul");
                var str = "";
                for(var i=0;i<50;i++){
                    str += "<li id="+i+">#"+i+"</li>";
                }
                oUi[0].innerHTML = str;
                    var oli=document.getElementsByTagName('li');
            for(var i=0;i<oli.length;i++)
            {
                (function(n){
                    oli[i].οnclick=function(){
                        alert("当前项是："+n);
                    }
                })(i)
            }

            }

function clearText() {
      var x=list.removeChild(list.childNodes[5]);
      alert("删除5节点的内容："+x.innerHTML+"<br/>");
}

function addText() {
var otest = document.getElementById("list");
var newnode=document.createElement("li");
var node=document.getElementById("10");
newnode.innerHTML="baidu.com /";
otest.insertBefore(newnode,node);
/*要先取node的值并且创建newnode，使用格式是父节点.inserBefore（newnode,node）*/
}

</script>

    </head>
    <body>

        <ul id="list" class="foo"></ul>
       <button οnclick="clearText()">清除节点内容</button>
       <button οnclick="addText()">增加节点内容</button>
    </body>
</html>