zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    ionic3开发环境搭建与配置(win10系统)
    angular4打包以后,刷新报404
    css3文字渐变无效果的解决方案
    node-sass安装失败的解决方案
    python logging 重复写日志问题
    进程和线程的概念
    软件开发目录规范
    相对导入
    python引入导入自定义模块和外部文件
    异常处理
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14498721.html
Copyright © 2011-2022 走看看