<!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.4

    对象内存分析 对象实例化操作初步分析 Java之中类属于引用数据类型,引用数据类型最大的困难之处在于要进行内存的管理,同时在进行操作的时候也会有内存关系的变化. 所以本次针对于之前的程序的内存关系进行 ...

  2. Vue项目的准备

    1.下载nodejs 检查是否安装成功 2.使用gitee作为线上仓库 3.使用脚手架工具--命令行工具 能在8080里显示出以下画面即为成功

  3. 查看服务器CPU相关信息！

    # 查看物理CPU个数 cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l # 查看每个物理CPU中core的个数(即 ...

  4. 神奇的 SQL 之 联表细节 → MySQL JOIN 的执行过程

    问题背景 对于 MySQL 的 JOIN,不知道大家有没有去想过他的执行流程,亦或有没有怀疑过自己的理解(自信满满的自我认为!):如果大家不知道怎么检验,可以试着回答如下的问题 驱动表的选择 MySQ ...

  5. Vulnhub_bossplayersCTF 记录

    目录 经验 & 总结 步骤流水 经验 & 总结 CTF这种东西还是有一些脑洞和约定俗成的东西: 比如多次编码 比如cmd参数传入执行的命令 步骤流水 端口信息搜集nmap -A 192 ...

  6. 企业行业分类数据库JSON

    这篇文章主要介绍了 企业信息中选择行业类型,常用在企业注册,入驻填写企业信息等. JSON: [{"id":1001,"name":"IT服务&quo ...

  7. win10的guard占内存过高

    转自:https://zhidao.baidu.com/question/1180883495203481459.html win10的guard占内存过高,

  8. urllib 库的代替品 requests 的用法

    Requuests 官方的介绍时多么的霸气,之所以那么霸气,是因为 Requestts 相比于 urllib 在使用方面上会让开发者感到更加的人性化.更加简洁.更加舒适,并且国外的一些公司也在使用re ...

  9. P1045麦森数

    P1045麦森数 #include<iostream> #include <cmath> #include <cstring> const int maxn = 1 ...

  10. SZWI3800

    xml <mapper namespace="jp.co.alsok.g6.zwi.dao.mapper.g6.custom.SZWI3800Mapper"> < ...