zoukankan      html  css  js  c++  java
  • jsDOM操作应用

    创建DOM元素

    createElement(标签名)   创建一个节点

    appendChild(节点)           追加一个节点---末尾

    例子:为ul插入li

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            window.onload = function (){
                var oBtn = document.getElementById('btn');
                var oUl = document.getElementById('ul')
                var oTxt = document.getElementById('txt')
                oBtn.onclick = function () {
                    //创建元素createElement(元素名)
                    var oLi = document.createElement('li');
                    //将input里面的值赋给li
                    oLi.innerHTML = oTxt.value;
                    //父级.appendChild(子节点);
                    oUl.appendChild(oLi);
                    oTxt.value ='';
                };
            }
        </script>
    </head>
    <body>
        <input type="text" name="" id="txt">
        <input id="btn" type="button" value="创建">
    </body>
    <ul id="ul"></ul>
    </html>

    插入元素

    insertBefore(节点,原有节点)    在已有元素前插入

    例子:倒序插入ul

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            window.onload = function (){
                var oBtn = document.getElementById('btn');
                var oUl = document.getElementById('ul')
                var oTxt = document.getElementById('txt')
                oBtn.onclick = function () {
                    //创建元素createElement(元素名)
                    var oLi = document.createElement('li');
                    var aLi = document.getElementsByTagName('li')
                    //将input里面的值赋给li
                    oLi.innerHTML = oTxt.value;
                    //父级.appendChild(子节点)
                    if (aLi.length>0) {
                        //在IE下
                        oUl.insertBefore(oLi,aLi[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }
                  
                    oTxt.value ='';
                };
            }
        </script>
    </head>
    <body>
        <input type="text" name="" id="txt">
        <input id="btn" type="button" value="创建">
    </body>
    <ul id="ul"></ul>
    </html>

    删除DOM元素

    removeChild(节点)      删除一个节点

    例子:删除li

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            window.onload = function () {
                var oUl = document.getElementById('ul')
                var aA = document.getElementsByTagName("a")
                for(var i=0;i<aA.length;i++){
                    aA[i].onclick = function () {
                        oUl.removeChild(this.parentNode)
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="ul">
            <li>1<a href="javascript:;">删除</a></li>
            <li>1<a href="javascript:;">删除</a></li>
            <li>1<a href="javascript:;">删除</a></li>
            <li>1<a href="javascript:;">删除</a></li>
            <li>1<a href="javascript:;">删除</a></li>
        </ul>
    </body>
    </html>

     文档碎片

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
         
            window.onload = function (){
                var oUl = document.getElementById('ul');
                var oFrag = document.createDocumentFragment();//创建一个文档碎片
                for( var i = 0;i<20;i++){
                    var oLi = document.createElement('li');
                    oFrag.appendChild(oLi);
                }
                oUl.appendChild(oFrag);
            }
        </script>
    </head>
    <body>
        <ul id="ul">
         
        </ul>
    </body>
    </html>

  • 相关阅读:
    iOS,Layer
    iOS 手势冲突
    ECharts
    手动安装Package Control
    webstorm配置svn详解
    js 对象 类型转换
    google 跨域解决办法
    关于内层DIV设置margin-top不起作用的解决方案
    图片与文字在div里实现垂直水平都居中
    css3之3D翻牌效果
  • 原文地址:https://www.cnblogs.com/520yh/p/12875953.html
Copyright © 2011-2022 走看看