<!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面向对象编程 -1.3

    类与对象的定义与使用 在Java之中类是一个独立的结构体,所以需要使用class来进行定义,而类之中主要由属性和方法所组成,那么属性就是一个个具体的变量,方法就是可以重复执行的代码. 定义一个类 cl ...

  2. Pako.js压缩解压,vue压缩解压,前后端之间高效数据传输

    项目开发中常常会遇到前后端之间有大量数据传输占用带宽导致页面响应慢的问题,这时候我们可以考虑使用Pako.js对信息进行压缩之后传输. 我在前端使用的是vue-element-admin前端框架.框架 ...

  3. Community Cloud零基础学习（一）启用以及简单配置

    本篇参考: https://trailhead.salesforce.com/en/content/learn/trails/communities https://trailhead.salesfo ...

  4. python中的 dir()内置函数的作用以及使用方法

    dir() 内置函数的作用 python 内置方法有很多,无论是初学者还是精通python 的程序员都不能全部即住所有的方法,这时候 dir() 方法就非常有用了,使用 dir()函数可以查看对象内的 ...

  5. SpringBoot+JWT+SpringSecurity+MybatisPlus实现Restful鉴权脚手架

    若图片查看异常,请前往掘金查看:https://juejin.im/post/5d1dee34e51d4577790c1cf4 前言 JWT(json web token)的无状态鉴权方式,越来越流行 ...

  6. （踩过的坑）使用Github Page搭建个人博客

    最近需要搭建一个网站,作为导航网址,但是自己的域名备案还要等上几天,就想着有没有别的办法来搭建一个公网可以访问的网站. Github Page的话是一个github个人主页,完全适合用来搭建普通网站. ...

  7. day2-2循环语句

    ECMAScript不存在块级作用域,在循环内部定义的变量也可以在外部访问到 局部变量与全局变量: 1) 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量. 2) 如果在函数中定义变量没 ...

  8. git github 对代码的管理

    参考:https://www.cnblogs.com/feynman61/p/9005252.html 一.Git 对远程仓库版本回退 场景: 同事 a.b 同时修改了代码,提交到仓库 同时 c 不熟 ...

  9. spring boot中不能识别RestController

    参考:https://blog.csdn.net/qq_16739693/article/details/80271987

  10. tensorflow文本分类实战——卷积神经网络CNN

    首先说明使用的工具和环境:python3.6.8   tensorflow1.14.0   centos7.0(最好用Ubuntu) 关于环境的搭建只做简单说明,我这边是使用pip搭建了python的 ...