通过jQuery创建元素节点:$oLi = $("<li></li>");这样我们就创建了一个li标签

如果想在元素节点中添加文本的话也挺简单:$oLi = $("<li>文本</li>");这样就可以在元素节点中添加文本了;

当然如果你要写一个动态的文本也可以:$oLi = $("<li>"+index+"</li>");这样子,只要把你所获得的文本赋给变量index就行了;

如果要写一些有属性,类名,id名的元素节点也挺简单:$oLi = $("<li title='title' class='li' id='lI'></li>);在添加属性和类名时别忘了和外围的引号区分开来;

向匹配的元素内部追加内容:$("ul").append("<li></li>");

将所有匹配的元素追加到指定的元素中:$("<li></li>").appendTo("ul");

将每个匹配的元素内部前置添加符合的元素:$("<li></li>").prepend("ul");

将元素添加到每个匹配的元素内部前置:$("<li></li>").prependTo("ul);

向匹配的元素后面添加元素,新添加的元素作为目标元素后的紧邻的兄弟元素:$("p").after("<div></div>;

将新建的元素插入到查找到的目标元素后,作为目标元素的兄弟节点:$("<p></p>").insertAfter("span");

在每一个匹配的元素之前插入,做为匹配元素的前一个兄弟节点:$("p").before("<span></span>");

将新建元素添加到目标元素前,做为目标元素的前一个兄弟节点:$("<a href='#'>锚点</a>).inserBefore("ul");

当然如果有不想要的节点咱也可以删除

比如:删除所有匹配的元素 $("ul").remove();匹配的所有元素都删除;

还有:$("ul").empty();匹配的所有元素清空子元素,看清楚是清空不是删除;

用jQuery实现简单的DOM操作的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. jQuery(3)——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  3. jQuery学习笔记(DOM操作)

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  4. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

  5. jquery学习:选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  6. jQuery 第二章 实例方法 DOM操作选择元素相关方法

    进一步选择元素相关方法:  .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作  .end()回退操作 .get() $(&qu ...

  7. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

  8. jQuery基础知识点(DOM操作)

    1.样式属性操作     1)设置样式属性操作         ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...

  9. jQuery使用(五):DOM操作之插入和删除元素

    插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...

随机推荐

  1. Eclipse中屏蔽日志

    如何在Eclipse中屏蔽日志 //屏蔽日志 Eclipse Java import org.apache.log4j.Level; import org.apache.log4j.Logger; L ...

  2. MongoDB GridFS规范

    This is being changed for 2.4.10 and 2.6.0-rc3. Tyler Brock's explanation: Now that the server uses ...

  3. 阿里云ECS网站备案流程

    首先登录阿里云账号-->点击选项卡中的备案专区-->开始备案选项卡-->增加网站 然后是一大堆信息核查,之后填写网站备案信息,这里注意,有个文件审批号的选项可以不填(选择“请选择”) ...

  4. node多项目同时运行,nginx端口监听转发

    在服务器端安装pm2 npm install npm2 -g --save 之后再项目目录下运行 pm2 start app.js 在查看进程,是否已经启动 pm2 list 多个项目,我们只要监听端 ...

  5. java中的锁池和等待池

    在java中,每个对象都有两个池,锁(monitor)池和等待池 wait() ,notifyAll(),notify() 三个方法都是Object类中的方法. 锁池:假设线程A已经拥有了某个对象(注 ...

  6. pow函数

    pow函数如果直接强制类型转换成int,会导致精度的损失.如果是int的幂计算,建议重写函数.或者用double型进行计算.

  7. 机器学习算法( 七、AdaBoost元算法)

    一.概述 当做重要决定时,大家可能都会考虑吸取多个专家而不只是一个人的意见.机器学习处理问题时又何尝不是如此?这就是元算法(meta-algorithm)背后的思路.元算法是对其他算法进行组合的一种方 ...

  8. 如何使用NFS

    这两个网卡之间可以通信的,如图所示 也可以写成具体的ip地址,或者ip地址段例如192.168.1.2-200 注意看下面这幅图,路径一定要写完整 下面开始挂载共享的目录 挂载之后什么都没有出现说明挂 ...

  9. jxta-amalto

    前几天在网络上搜索jxta的消息,发现jxta 2.8x已经启动了,官方地址http://chaupal.github.io/ 在浏览其邮件列表时,意外发现一老外基于jxta 2.6修改的一版, 可在 ...

  10. 为 Ruby 程序员准备的 Go 入门教程

    这是我翻译的国外博客,如需转载请注明出处和原文链接 那些在Google的大牛们开发出了一种称为Go的牛叉的语言.乍一看,Ruby和Go有点像远房表亲.其实不然,他们那些互为补充的功能却让他们成为一对完 ...