文档章节

jQuery 和 javascript 插入,复制,替换和删除节点

koobur
 koobur
发布于 2015/03/31 13:25
字数 434
阅读 44
收藏 1

今天为了写轮播图,重新看了下 js Dom操作。

jquery 参考 http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp;
javascript 参考 http://www.w3school.com.cn/jsref/dom_obj_all.asp;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
    <p>你好!</p> 
       你最喜欢的水果是? 
       <ul> 
        <li title="苹果">苹果</li> 
        <li title="橘子">橘子</li> 
        <li title="菠萝">菠萝</li> 
    </ul> 
</body>
</html>
// 几种添加节点的方法 ; 原生js:element.appendChild(),element.insertBefore()
$("p").append("<b>你好吗?</b>");//向p元素中追加《b》 
$("<b>你好吗?</b>").appendTo("p");//将《b》追加到p元素中 
$("p").prepend("<b>你好吗?</b>");//向p中前置《b》 
$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中 
$("p").after("<b>你好吗?</b>");//向p元素后插入《b》 
$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边 
$("p").before("<b>你好吗?</b>");//在p元素之前添加《b》 
$("<b>你好吗?</b>").insertBefore("p");//将《b》插入到p元素前面 
 
// 几种删除节点的方法 ; 原生js:element.removeChild()
var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 
 
// 复制节点 ; 原生js:element.cloneNode()
$(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件 
 
// 替换节点 ; 原生js:element.replaceChild()
$("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>");

 

本文转载自:

共有 人打赏支持
koobur
粉丝 11
博文 16
码字总数 11102
作品 0
昌平
高级程序员
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0
jQuery:插入,复制,替换和删除节点

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制、替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2......

北方攻城师
2015/07/01
0
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
07/20
0
0
二、jQuery中的DOM操作

Dom操作的分类 一般来说,Dom操作分为3个方面,即DOM Core、HTML-DOM和CSS-DOM。 jQuery中的DOM操作 一、查找节点 用jQuery在文档树上查找节点非常容易,可以利用前面介绍的jQuery选择器来完...

Winnie007
2015/11/14
0
0
jQuery的性能优化,你知道几条

我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 ==================================...

刘炳文
2013/08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
0
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
5
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
130
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部