<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

</head>

<body>

//Jquery的dom操作

append()  在容器插入标签(插入到最后)

   appendTo() 把标签插入到容器(插入到最后)

   prepend() 在容器插入标签(插入到最前)

   prependTo()  把标签插入到容器(插入到最前)

   after()       在某个标签后插入标签

   inserAfter()  把某个标签插入到标签后

   before()      在某个标签前插入标签

   insertBefore() 把某个标签插入到标签前

   empty()        清空内部子节点

   remove()       移除节点自身，不保存事件和属性

   detach()       移除节点自身,保存事件和属性

   clone()        克隆节点  （true）克隆事件

   replaceWith() *  将标签替换为其他标签

   replaceAll() *    用标签替换标签

   wrap() *          用标签包裹标签

   unwrap() *        去除容器

   wrapall() *       用标签包裹标签

   wrapinner() *

　

　//html

<ul class="list">

      <li>li1</li>

      <li>li2</li>

      <li>li3</li>

   </ul>

   <div id="box">hhhhhh</div>

   <div id="box1">aaaaaa</div>

 

   <div class="box2"><span>inner</span></div>

   <div class="a1">a1</div>

   <div class="a2">a2</div>

<script type="text/javascript">

//举例

var    $oDiv4 = $("<li>li4</li>");      //创建子元素节点

$(".list").append($oDiv4);        //为类名为.list的父元素添加子元素

  var $oDiv5 = $("<li>li5</li>");

$oDiv5.appendTo($(".list"));         //标签添加到类名为list后面，默认在最后面

var $oDiv6 = $("<li>li6</li>");  

$(".list").prepend($oDiv6);       //添加到最前面，即父元素下的第一个标签

var $oDiv7 = $("<li>li7</li>")   

$oDiv5.after($oDiv7);                //在li5后面加个li7

$("#box").empty();             //清空内部子节点

$("#box1").remove();           //id为box1的标签从网页中移除

var $box2 =  $(".box2").clone(true);  //克隆，

  $oDiv7.append($box2);             //然后添加到li7后面

  $(".box2").replaceWith("替换原来内容");   //替换原来内容，其实用html()方法也可以实现

</script>

</body>

</html>

Jquery所有Dom操作汇总的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  3. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  4. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  5. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

  6. js，jQuery和DOM操作的总结（二）

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  7. 03-老马jQuery教程-DOM操作

    jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...

  8. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  9. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

随机推荐

  1. Java面向对象编程 -3.2

    使用this调用本类方法 除了调用属性之外,this也可以实现方法的调用,但是对于方法的调用就必须考虑构造与普通方法 构造方法调用(this()):使用关键字new实例化对象的时候才会调用构造方法: ...

  2. vue项目中vant tab改变标签颜色

    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...

  3. Python爬虫教程-新浪微博分布式爬虫分享

    爬虫功能: 此项目实现将单机的新浪微博爬虫重构成分布式爬虫. Master机只管任务调度,不管爬数据:Slaver机只管将Request抛给Master机,需要Request的时候再从Master机拿 ...

  4. ios中为视图添加圆角

    1.使用 layer设置指定圆角 或者设定一个或几个圆角 码修 关注 2017.04.20 19:03* 字数 107 阅读 656评论 0喜欢 0 由于项目中需要给按钮左下 和左上加圆角,我司可爱的 ...

  5. Scrapy 分布式爬取

    由于受到计算机能力和网络带宽的限制,单台计算机运行的爬虫咋爬取数据量较大时,需要耗费很长时间.分布式爬取的思想是“人多力量大”,在网络中的多台计算机同时运行程序,公童完成一个大型爬取任务, Scrap ...

  6. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  7. highcharts Ajax 动态请求加载数据

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. Linux centos7 Linux网络相关、firewalld和netfilter、netfilter5表5链介绍、iptables语法

    一. Linux网络相关 yum install net-tools ifconfig查看网卡ip ifup ens33开启网卡 ifdown ens33关闭网卡 设定虚拟网卡ens33:0 mii- ...

  9. Servlet简单的登陆窗口

    web.xml配置: jsp代码: 注意:action书写的是为这次登陆做处理类的别名,method就是请求的方式 Get请求方式没有请求实体 //如果只是看效果就光写一下service方法就行了 p ...

  10. h5 穿透滚动

    引子 h5 页面有弹窗浮层时,浮层之下若产生了滚动,滑动浮层时会让其产生滚动.这是示例页面,移动端访问如下: Origin My GitHub 原因 找到的信息里面有两种说法: 使用了 -webkit ...