jQuery添加删除DOM元素方法详解

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jQuery添加删除DOM元素方法详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下：

介绍

DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。

1、DOM Core

DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，用途也远不止仅限于网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。 例如：document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法。

2、HTML-DOM

在使用Javascript和DOM为HTML文件编写脚本时，有许多属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，他提供了一些更简明的记号来描述各种HTML元素的属性。 例如：

代码如下:

PS:可以看出，获取对象、属性即可以用DOM Core来实现民，也可以用HTML-DOM实现。

3、css-DOM

css-DOM是针对CSS的操作,在javascript中，css-DOM主要的作用是获取和设置style对象的各种属性，由此达到网页呈现出各种不同的效果.

例如：

代码如下:
方法。

常用方法

1.查找元素节点

代码如下:
获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)");
2.查找元素属性

利用jquery的attr()方法来获取元素的各种属性的值，attr()方法的参数可以是一个，也可以是两个。

当参数是一个时，则是要查询的属性名称。

当参数是两个时，则可以设置属性的值。

输出元素的title属性.一个参数 $("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数

3.添加元素节点

$(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象，并将这个dom对象包装成一个jquery对象返回，总之就是把标记所有HTML代码都放到$()工厂里面就行了！

例：

香蕉"); //创建DOM对象 var $ul = $("ul"); //获取UL对象 $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

下面列出部分插入节点的方法

方法

内容

代码

代码

AA”);

AA

方法和 代码

代码

AA”).appendTo (“ul”).;

AA

内容

代码

代码

ABC”);

ABC

方法和 代码

代码

ABC”).prependTo.(“p”);

ABC

内容，

代码

AAA

代码

cc”);

AAA

cc

代码

AAA

代码

cc”).After(“p”);

AAA

cc

内容

代码

AAA

代码

cc”);

cc

AAA

代码

AAA

代码

cc”). insertBefore (“p”);

cc

AAA

好了，不要斋看，自己动手试试吧:)

4.删除元素节点

由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty();

4.1 remove()方法

获取到要删除的元素，然后调用remove()方法 $("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用 $("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

4.2 empty()方法

严格来讲，empty()方法并不是删除元素，而是清空

例：

HTML代码：

    • JQuery代码：

    代码如下:

    结果

    • 记住，只会清空内容，不会请空属性;

    更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题：《方法总结》

    希望本文所述对大家jQuery程序设计有所帮助。

    jQuery删除删除删除添加添加添加

    猜你在找的jQuery相关文章

    《锋利的jQuery》笔记：插件的使用和写法
    jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
    jQuery插件开发入门
    扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
    jquery.roundabout.js实现3D图片层叠旋转木马切换
    最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
    jQuery效果之jQuery实现图片的依次加载图片
    css代码： js代码：
    jQuery之deferred对象详解
    一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
    jQuery插件开发进阶
    jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
    jQuery 实现邮箱输入自动提示功能：（一）
    记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
    jQuery插件之上传文件ajaxfileupload.js源码与使用
    在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
    jQuery效果之封装一个文章图片弹出放大效果
    首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
    《从零开始学习jQuery》：用jQuery操作元素的属性与样式
    元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作