zoukankan html css js c++ java

DOM中的创建，插入，删除

1.创建一个节点，用creatElement(TagName)

appendChild 是添加子节点。用法是父级.appendChild(子节点)；

2.插入用insertBefore

用法父级.insertBefore(子节点，在谁之前)。我犯得错误是没有把创建的li获取出来，直接写的oLi[0]，要知道oLi并不是一个数组。他仅仅是一个变量。

oBtn.onclick = function (){
        var oLi = document.createElement('li');
//        oUl.appendChild(oLi);
        oLi.innerHTML = oTxt.value;
        oUl.insertBefore(oLi,oLi[0]);            错误示范
    };

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
</head>
<body>
<input id="txt" type="text" />
<input id="btn" type="button"/>
<ul id="ull"></ul>
<script>
    var oBtn = document.getElementById('btn');
    var oUl = document.getElementById('ull');
    var oTxt = document.getElementById('txt');
    var aLi = document.getElementsByTagName('li');
    oBtn.onclick = function (){
        var oLi = document.createElement('li');
//        oUl.appendChild(oLi);
        oLi.innerHTML = oTxt.value;

        if(aLi.length>0)
        {
            oUl.insertBefore(oLi,aLi[0]);
        }
        else
        {
            oUl.appendChild(oLi);
        }
    };
</script>

</body>
</html>

删除子节点用法父级.removeChild(子节点)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
</head>
<body>
<ul id="ull">
    <li>egdf<a href="javascript:">删除</a></li>
    <li>bnfgd<a href="javascript:">删除</a></li>
    <li>qr43<a href="javascript:">删除</a></li>
    <li>rgs<a href="javascript:">删除</a></li>
    <li>shdy<a href="javascript:">删除</a></li>

</ul>
<script>
    var oUl = document.getElementById('ull');
    var aA = document.getElementsByTagName('a');
    for(var i=0;i<aA.length;i++) {
        aA[i].onclick = function () {
            oUl.removeChild(this.parentNode);
        }
    }
</script>

</body>
</html>

查看全文

相关阅读:
单例设计模式
 网络编程--Socket与ServerSocket
JDBC连接Oracle数据库
 ObjectInputStream与ObjectOutputStream
MyBatis的SQL语句映射文件详解（二）----增删改查
 MyBatis的SQL语句映射文件详解
 MyBatis+Spring实现基本CRUD操作
 通俗解释IOC原理
 Git菜鸟
 hibernate连接oracle数据库

原文地址：https://www.cnblogs.com/zhuni/p/4711005.html