jQuery: 整理4---创建元素和添加元素

1.创建元素:$("内容")

const p = "<p>这是一个p标签</p>"
console.log(p)console.log($(p))

2. 添加元素

2.1 前追加子元素

1.  指定元素.prepend(内容)  ->  在指定元素的内部的最前面追加内容,内容可以是字符串、html标签或者jQuery对象

    <style>div{margin: 10px 0;}.green {background-color: green;}</style><div class="green"><span>333</span></div>        // 1. 创建一个spanconst span = "<span>666</span>"// 2. 前追加子元素:$(".green").prepend(span)

 

 2. $(内容).prependTo(指定元素)   -> 把内容追加到指定元素内部的最前面

    const span2 = "<span>777</span>"$(span2).prependTo($(".green"))

2.2 后追加子元素 

1. 指定元素.append(内容)  ->  在指定元素的内部的最后面追加内容,内容可以是字符串、html标签或者jQuery对象

与前追加子元素一样,这边就省略了 -_-

2.3 前追加同级元素

before()   -> 在指定元素的前面追加内容

 const span2 = "<span>777</span>"$(".blue").before(span2)

 

 

 2.4 后追加同级元素

const span2 = "<span>777</span>"$(".blue").after(span2)

 

注意:将已存在的内容追加到指定元素中: 会将原来元素直接剪切放到指定元素 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/377158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Design a high performance cache for multi-threaded environment

如何设计一个支持高并发的高性能缓存库 不 考虑并发情况下的缓存的设计大家应该都比较清楚&#xff0c;基本上就是用map/hashmap存储键值&#xff0c;然后用双向链表记录一个LRU来用于缓存的清理。这篇文章 应该是讲得很清楚http://timday.bitbucket.org/lru.html。但是考虑到高…

《MySQL——join语句优化tips》

目录要不要用joinJoin驱动表选择Multi-Range Read优化Batched Key Access &#xff08;BKA&#xff09;对NLJ进行优化BNL算法性能问题BNL转BKA要不要用join 1、如果使用的是Index Nested-Loop Join算法&#xff0c;即可以用上被驱动表的索引&#xff0c;可以用 2、如果使用的…

scala中抽象类_Scala中的抽象类

scala中抽象类抽象类 (Abstract Class) In the Scala programming language, abstraction is achieved using abstract class. 在Scala编程语言&#xff0c; 抽象是使用抽象类来实现的。 Abstraction is the process of showing only functionality and hiding the details fr…

不能catch Fatal的exception

Clemens Vasters - Are you catching falling knives?里给了一个判断C#的exception是不是fatal的代码&#xff0c;可以参考参考。 public static bool IsFatal(this Exception exception) {while (exception ! null){if (exception as OutOfMemoryException ! null &&…

HDU 2824 The Euler function

筛法计算欧拉函数 #include <iostream> #include <cstdio> using namespace std; const int maxn3000005; long long phi[maxn]; int main(){int i,j,a,b;for(i1;i<maxn;i) phi[i]i;for(i2;i<maxn;i2) phi[i]/2;for(i3;i<maxn;i2)if(phi[i]i){for(ji;j<…

LinkChecker 8.1 发布,网页链接检查

LinkChecker 8.1 可对检查时间和最大的 URL 数量进行配置&#xff1b;当使用 HTTP 请求时发送 do-not-track 头&#xff1b;生成 XML 的 sitemap 用于搜索引擎优化&#xff1b;检测 URL 长度和重复的页面内容&#xff1b;修复了很多检查的 bug。 LinkChecker 是一个网页链接检查…

c语言语言教程0基础_C语言基础

c语言语言教程0基础Hey, Folks here I am back with my second article on C language. Hope you are through with my previous article C language - History, Popularity reasons, Characteristics, Basic structure etc. In this one, I will cover some fundamental conce…

《MySQL——临时表》

内存表与临时表区别 临时表&#xff0c;一般是人手动创建。 内存表&#xff0c;是mysql自动创建和销毁的。 内存表&#xff0c;指的是使用Memory引擎的表&#xff0c;建表语法&#xff1a;create table ... engine memeory 表的数据存在内存里&#xff0c;系统重启后会被清…

android中ActionBar的几个属性

actionBar.setHomeButtonEnabled //小于4.0版本的默认值为true的。但是在4.0及其以上是false&#xff0c;该方法的作用&#xff1a;决定左上角的图标是否可以点击。没有向左的小图标。 true 图标可以点击 false 不可以点击。 actionBar.setDisplayHomeAsUpEnabled(true) //…

drei

模拟9 T3 &#xff08;COGS上也有&#xff0c;链接http://218.28.19.228/cogs/problem/problem.php?pid1428&#xff09; 题目描述 输入a&#xff0c;p&#xff0c;求最小正整数x&#xff0c;使得a^x mod p 1。 分析 神奇的欧拉定理&#xff08;对于gcd&#xff08;a&#xf…

《MySQL——group by使用tips》

1、如果对group by语句结果没有排序要求&#xff0c;在语句后面加order by null 2、尽量让group by 过程用上索引&#xff0c;确认方法是explain结果里没有Using temporary 和Using filesort 3、如果group by 需要统计的数据量不大&#xff0c;尽量只使用内存临时表&#xff…

css中变量_CSS中的变量

css中变量CSS | 变数 (CSS | Variables) CSS variables allow you to create reusable values that can be used throughout a CSS document. CSS变量允许您创建可在CSS文档中使用的可重用值。 In CSS variable, function var() allows CSS variables to be accessed. 在CSS变…

位图像素的颜色 携程编程大赛hdu

位图像素的颜色 Time Limit: 2000/1000 MS (Java/Others) MemoryLimit: 32768/32768 K (Java/Others) Total Submission(s): 0 Accepted Submission(s): 0 Problem Description 有一个在位图上画出矩形程序&#xff0c;一开始位图都被初始化为白色&#xff08;RGB颜色表示…

《MySQL——InnoDB与Memory以及临时表》

InooDB与Memory 数据组织方式不同&#xff1a; InnoDB引擎把数据放在主键索引上&#xff0c;其他索引上保存的是主键id。为索引组织表Memory引擎把数据单独存放&#xff0c;索引上保存数据位置。为堆组织表 典型不同处&#xff1a; 1、InnoDB表的数据总是有序存放的&#x…

Oracle 用户 profile 属性 转

--查看profile 内容 select * from dba_profiles where profilePF_EAGLE; --查看用户的profiles select username,profile from dba_users; --查看是否启用动态资源限制参数 SHOW PARAMETER RESOURCE_LIMIT; --启用限制 ALTER SYSTEM SET RESOURCE_LIMITTRUE SCOPEBOTH; --创建…

CUL8R的完整形式是什么?

CUL8R&#xff1a;稍后再见 (CUL8R: See You Later) CUL8R is an abbreviation of "See You Later". CUL8R是“稍后见”的缩写 。 It is an expression, which is commonly used in messaging or chatting on social media networking sites like Facebook, Yahoo M…

SuperSpider——打造功能强大的爬虫利器

SuperSpider——打造功能强大的爬虫利器 博文作者&#xff1a;加菲 发布日期&#xff1a;2013-12-11 阅读次数&#xff1a;4506 博文内容&#xff1a; 1.爬虫的介绍 图1-1 爬虫&#xff08;spider) 网络爬虫(web spider)是一个自动的通过网络抓取互联网上的网页的程序&#xf…

《MySQL——关于grant赋权以及flush privileges》

先上总结图&#xff1a; 对于赋予权限或者收回权限还是创建用户&#xff0c;都会涉及两个操作&#xff1a; 1、磁盘&#xff0c;mysql.user表&#xff0c;用户行所有表示权限的字段的值的修改 2、内存&#xff0c;acl_users找到用户对应的对象&#xff0c;将access值修改 g…

对Spring的理解

1、Spring实现了工厂模式的工厂类&#xff0c;这个类名为BeanFactory实际上是一个接口&#xff0c;在程序中通常BeanFactory的子类ApplicationContext。Spring相当于一个大的工厂类&#xff0c;在其配置文件中通过<bean>元素配置用于创建实例对象的类名和实例对象的属性。…

Java中的null是什么?

As we know null is an important concept in every language not only in Java but here we will study various factors regarding null. 我们知道null在每种语言中都是重要的概念&#xff0c;不仅在Java中&#xff0c;在这里我们还将研究有关null的各种因素。 null is a ver…