jQuery之节点操作

作者: old帅 | 来源:发表于2017-06-05 18:15 被阅读18次

心灵鸡汤:心若强大又何惧路艰,心无风雨又何盼他人执伞

1.1动态创建元素

// $()函数的另外一个作用:动态创建元素

var $spanNode = $(“我是一个span元素”);

var node = $(“#box”).html(“

  • 我是li
  • ”);

    1.2添加元素(只是常用的方法,不常用的不在介绍)

    在元素的最后一个子元素后面追加元素:

    append()重点

    作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(存在或者创建出来的元素都可以)

    如果是页面中存在的元素,那么调用append()后,会把这个元素放到相应的目标元素里面去;但是,原来的这个元素,就不存在了。

    如果是给多个目标追加元素,那么方法的内部会复制多份这个元素,然后追加到多个目标里面去。

    //在$(selector)中追加$node
    $(selector).append($node);

    2 prepend()

    作用:在元素的第一个子元素前面追加内容或节点

    $(selector).prepend(node);

    3 after()

    作用:在被选元素之后,作为兄弟元素插入内容或节点

    $(selector).after(node);

    4 before()

    作用:在被选元素之前,作为兄弟元素插入内容或节点

    $(selector).before(node);

    1.3html创建元素(推荐使用,重点)

    作用:设置或返回所选元素的html内容(包括HTML标记)

    设置内容的时候,如果是html标记,会动态创建元素,此时作用跟js里面的innerHTML属性相同

    //动态创建元素

    $(selector).html(‘传智播客’);

    //获取html内容

    $(selector).html();

    1.4清空元素

    //清空指定元素的所有子元素(光杆司令)

    //没有参数

    $(selector).empty();

    $(selector).html(“”);

    // “自杀”把自己(包括所有内部元素)从文档中删除掉

    $(selector).remove();

    1.5复制元素

    作用:复制匹配的元素

    //复制$(selector)所匹配到的元素

    //返回值为复制的新元素

    $(selector).clone();

    总结:

    推荐使用html(“”)方法来创建元素或者html(“”)清空元素

    相关文章

    • jQuery之节点操作

      心灵鸡汤:心若强大又何惧路艰,心无风雨又何盼他人执伞 1.1动态创建元素 // $()函数的另外一个作用:动态创建...

    • 四、jQuery属性操作

      什么是属性?什么是属性节点?jQuery添加和移除属性节点jQuery操作css类jQuery操作文本值 1. 什...

    • jQuery事件

      jquery事件 事件函数列表: 取消绑定事件: jquery元素节点操作 插入节点 删除节点 todolist(...

    • jQuery节点操作,jQuery插入节点,jQuery删除节点

      一.创建节点 1 2 二.插入节点jQuery 提供了好几种个方法来插入节点:1、内部插入节点方法方法名描述app...

    • jQuery学习总结之DOM操作篇

      在jQuery中,主要的DOM操作分为以下几类: 一、查找节点 1、查找元素节点 2、查找属性节点利用jQuery...

    • Day23——jQuery

      一、导入jQuery 二、节点操作 1. 获取节点 2. 创建节点 3. 添加节点 4. 删除节点 三、属性操作 ...

    • jQuery节点操作

      添加元素 html创建元素 清空元素 复制元素 属性操作 值和内容 其他样式操作

    • jQuery节点操作

      节点操作 1.动态创建元素 2.html创建元素作用:设置或返回所选元素的html内容(包括 HTML 标记)设置...

    • jQuery —— 节点操作

    • JQuery节点操作

      通过 JQuery 节点操作的办法来实现交互,减少手动添加类名操作。优点是能够减少重复功能代码,缺点是如果模板类名...

    网友评论

      本文标题:jQuery之节点操作

      本文链接:https://www.haomeiwen.com/subject/raqwfxtx.html