内部插入:父子级关系

1 $(a).append($(b))把b插入到a里面(a里面的面后)

$("div").append($("<p>段落</p>"));

2 $(b).appendTo($(a)):把b放到a里面(a里面的后面)

3 $(a).prepend($(b)):把b插入到a中(a里面的前面)

4 $(b).prependTo($(a)):把b插入到a中(a里面的前面)

$("p").prependTo($("div"));

这种插入一定是父子级关系

外部插入:兄弟级关系

1 $(a).after($(b));把b插入到a的后面

$("div").after("<b>这是b标签</b>");

$(a).before($(b));把b插入到a的前面

$("<b>这是一个新标签</b>").insertAfter($("div"));

3 $(a).before($(b)):把b插入到a的前面

$("div").before($("<p>这是一个新段落</p>"));

4 $(b).insertBefore($(a)):把b插入到a前面

包裹

1 wrap:包裹$(a).wrap($(b)):把a用b包裹起来

类似于这样

2 unwrap:取消包裹

$("div").unwrap('<p></p>');

3 wrapAll:把所有的都包裹起来【所有元素都会被一个包裹起来】

$("div").wrapAll('<p></p>');

4 wrapInner:内部包裹

$("div").wrapInner('<p></p>');

替换

1 $(a).replaceWith($(b)) 把a 替换成b

$("div").replaceWith("<p>aaa</p>");

2 $(b).replaceAll($(a)):所有都替换,把b替换成a

$("<p>aaa</p>").replaceAll("div");

删除

1 empty:删除的是内容

$("#d1").empty();

删除标签内的东西,包括标签

2 remove:删除的是整个标签

$("#d1").remove();

复制

clone:复制出一个一模一样的元素

jq——DOM文档处理的更多相关文章

  1. ready是先执行的,load后执行,DOM文档的加载步骤

    在jq中在文档载入完毕后有这几种方式去执行指定函数: $(document).ready(function() { // ...代码... }); //document ready 简写 $(func ...

  2. 将XML解析成DOM文档

    在支持html5的浏览其中,可以使用标准解析器DOMParser对象进行解析html或者xml等字符串 var data = '<div></div>'; var tmp = ...

  3. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  4. Jsoup库 解析DOM文档

    DOM文档包括 HTML, XML等等 下载: http://jsoup.org/download Jsoup 获取数据的方式 //html 文本, url, 本地html String html = ...

  5. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  6. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

  7. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  8. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  9. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

随机推荐

  1. vue 绑定 HTML Class

    绑定 HTML Class

  2. python的包装和授权

    包装:python为大家提供了标准数据类型,以及丰富的内置方法,其实在很多场景下我们都需要基于标准数据类型来定制我们自己的数据类型,新增/改写方法,这就用到了我们刚学的继承/派生知识(其他的标准类型均 ...

  3. 30 包含min函数的栈(举例让抽象问题具体化)

    题目描述: 定义栈的数据结构(push/pop),请在该类型中实现一个能够得到栈中所含最小元素的min函数(三者的时间复杂度都应为O(1)). 测试用例: 1)新压入栈的数字比之前的最小值大/小 2) ...

  4. JavaScript模块化编程之AMD

    简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...

  5. UVA11827 Maximum GCD

    /* UVA11827 Maximum GCD https://vjudge.net/contest/153365#problem/V 数论 gcd 水题,然而读入比较坑 * */ #include ...

  6. Erlang语言入门

    Erlang语言入门 下载Erlang,http://www.erlang.org/downloads 安装之后开始菜单中有Erlang图标,打开之后是Erlang Shell,可以定制喜欢的颜色和字 ...

  7. 《UML精粹》第三章 -类图的基本概念

    第三章 类图:基本概念 类图可用来描写叙述系统中各种对象的类型.也可描绘出对象间各种各样的静态关系.此外.类图中也能够秀出类的性质(property)与操作(operation),以及可应用到对象间连 ...

  8. ios网络学习------3 用非代理方法实现异步post请求

    #pragma mark - 这是私有方法.尽量不要再方法中直接使用属性,由于一般来说属性都是和界面关联的,我们能够通过參数的方式来使用属性 #pragma mark post登录方法 -(void) ...

  9. SDUT 1225-编辑距离(串型dp)

    编辑距离 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 如果字符串的基本操作仅为:删除一个字符.插入一个字符和将一个字符改动 ...

  10. socket编程之二:两种链接类型tcp和udp

    前面一篇文章说到了一些计算机网络的基础知识.引入了socket.从这节開始,就进入正题了. 一 概述 TCP:Transimission Control Protocol传输控制协议. UPD:Use ...