• 3_4:操作元素 [ 创建 添加 删除 ]


    一  创建元素

    $(''<li></li>''); //动态的创建了一个 li 元素

    二 添加元素

    // 内部添加元素,生成之后,它们是父子关系。
    // 外部添加元素,生成之后,他们是兄弟关系

    1)内部添加

    element.append(''内容''); //把内容放入匹配元素内部最后面,类似原生 appendChild。
    
    element.prepend(''内容'');//把内容放入匹配元素内部最前面

    2)外部添加

    element.after(''内容''); // 把内容放入目标元素后面
    
    element.before(''内容'');// 把内容放入目标元素前面

    三 删除元素

    element.remove() // 删除匹配的元素(本身)
    
    element.empty() // 删除匹配的元素集合中所有的子节点
    
    element.html('') // 清空匹配的元素内容
    remove 删除元素本身。
    empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。

    代码范例

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素的创建 添加 删除</title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
    <ul>
        <li>李白</li>
    </ul>
    <script>
        //1 创建元素
        $("<li></li>");
    
        //2 插入内部元素
        $('ul').append($("<li>白居易</li>"));//向元素尾部压入 子元素 [父子关系]
        $('ul').prepend($("<li>王博</li>"));//向元素头部压入 子元素 [父子关系]
    
        //3 插入外部元素
        $('ul').before($("<div>唐朝诗人</div>"));//在元素前面 压入 兄弟元素 [兄弟关系]
        $('ul').after($("<div>宋朝诗人</div>"));//在元素后面 压入 兄弟元素  [兄弟关系]
    
        //3 删除元素
        //$('ul').remove();//ul 和 li 都被删除了
        //$('ul').empty();//保留了ul 删除了ul的所有子元素
        $('ul').html('打发打发');//保留了ul 删除了ul的所有子元素 区别:html还可以设置值
    </script>
    </body>
    </html>
  • 相关阅读:
    关于题目中的内存限制
    手动实现最小堆和最大堆(优先队列)
    线性筛素数(欧拉筛)+前缀和优化
    并查集
    快速排序

    字典按中文姓名排序
    oc程序代码
    学生字典计算年龄差 随机50个数
    nsset
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14498721.html
Copyright © 2020-2023  润新知