一、插入

1. append

$("#div").append('<a href="baidu.com">a</a>') ;   // 末尾插入

2. appendTo

$('<a href="baidu.com">a</a>').appendTo($("#div"));  // 末尾插入

$('<div></div>', {
class: 'nstSlider',
'data-range_min': obj.range_min,
'data-range_max': obj.range_max,
}).appendTo(sliderWrap);

3.prepend

$("#content").prepend($('span'));

4.prependTo

$("span").prependTo("#content");     /   $("span").prependTo($("#content"));   // 内容最前方插入指定内容 ,和搬砖一样,有砖是移动,没有就看存不存在可形成的实体,存在就添加,否则啥事不做。

5. before dom外层前方插入

$("p").before("<p>Hello world!</p>");

6. after dom外层后方插入

$("p").after("<p>Hello world!</p>");

7.insertAfter 指定dom外层后方插入

$("<span>你好!</span>").insertAfter("p");

二、包裹

1. wrapInner

$("#div").wrapInner($("<a class='btn'></a>"));   //用 a 包裹住 #div 内容,即 内容加套

2. wrap

$("p").wrap("<div style='border:1px solid red'><p></p></div>");   // 用此结构包裹 匹配的p ,内容及其dom均被裹住,即 外壳加套。

3.wrapAll

$("p").wrapAll("<div style='border:1px solid red'><p></p></div>");  // 创造一个包围圈,把所有匹配元素围起来,不匹配挤到外边,控制台筛选元素不错。。

jq 插入结构的更多相关文章

  1. 使用jq插入节点

    .append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插 ...

  2. JQ插入节点方法

    1.append()  appendTo()  prepend() prependTo() 2. before() insertBefore() after() insertAfter()

  3. JQ的基本架构

    Jquery的基本架构   引入  以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多 ...

  4. C和C指针小记(十七)-使用结构和指针-链表

    1.链表 链表(linked list)即使是一些包含数据的独立数据结构的(Node)集合. 链表中的每个节点通过链或指针链接在一起. 程序通过指针访问链表中的节点. 节点通常是动态分配的,但也有由节 ...

  5. 六、golang中的结构体和方法、接口

    结构体: 1.用来自定义复杂数据结构 2.struct里面可以包含多个字段(属性) 3.struct类型可以定义方法,注意和函数的区分 4.strucr类型是值类型 5.struct类型可以嵌套 6. ...

  6. 公用表表达式CTE简单递归使用-简单树形结构

    1.建表脚本 CREATE TABLE [dbo].[tb_tree]( ,) NOT NULL, [ParentId] [int] NULL, ) NULL, CONSTRAINT [PK_tb_t ...

  7. 【英语魔法俱乐部——读书笔记】 2 中级句型-复句&合句(Complex Sentences、Compound Sentences)

    [英语魔法俱乐部——读书笔记] 2 中级句型-复句&合句(Complex Sentences.Compound Sentences):(2.1)名词从句.(2.2)副词从句.(2.3)关系从句 ...

  8. GOOGLE PROTOBUF开发者指南

    原文地址:http://www.cppblog.com/liquidx/archive/2009/06/23/88366.html 译者: gashero 目录 1   概览 1.1   什么是pro ...

  9. Jquery的基本架构

    引入  以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多浏览器,还能很方便地使用JS ...

随机推荐

  1. android studio 错误: 编码GBK的不可映射字符

    在模块的build.gradle中加入: tasks.withType(JavaCompile) { options.encoding = "UTF-8" } JavaCompil ...

  2. 7.8 Models -- The Rest Adapter

    一.概述 默认的,store将会使用 DS.RESTAdapter来加载和存储records.这个RESTAdapter假定URLS和JSON关联每一个model是约定好的:这意味着,如果你遵循这个规 ...

  3. 用户用户组管理:用户管理命令-passwd

    passwd直接回车就是给root设密码.或加root. 普通用户只能改自己的密码.改时直接敲passwd,回车.否则报错. 因为只有root可以在passwd后加用户名.其实最常见的就是不加选项. ...

  4. C++ 简明教程

    C++是一种系统编程语言.用它的发明者, Bjarne Stroustrup的话来说,C++的设计目标是: 成为“更好的C语言” 支持数据的抽象与封装 支持面向对象编程 支持泛型编程 C++提供了对硬 ...

  5. python openpyxl 2.5.4 版本 excel常用操作封装

    最近搭框架用的openpyxl 2.5.4版本,之前封装的函数有些提示不推荐使用了,我做了一些更新: 代码: # encoding=utf-8 from openpyxl import load_wo ...

  6. xml声明中的standalone属性

    晚上,在测试tinyxml的时候,发现其中声明了<?xml version="1.0" standalone="no" ?>,经查,其含义为stan ...

  7. 01: tornado基础篇

    目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 Torn ...

  8. Cortex-M3基础

    (一)寄存器 1 寄存器组      R0-R12: 通用寄存器 ------------------------------------------------------------------- ...

  9. 洛谷月赛 Hello World(升级版) - 动态规划

    题目背景 T1答案要mod1000000007(10^9+7),请重新提交,非常抱歉! 一天,智障的pipapi正在看某辣鸡讲义学程序设计. 题目描述 在讲义的某一面,他看见了一篇文章.这篇文章由英文 ...

  10. Python3基础 __len__,__getitem__ 记录列表中元素访问的次数 定制不可变序列,下标字典

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...