JQ DOM元素 创建 添加 删除
创建元素
// 创建元素节点
$('<p></p>');
// 创建属性节点
$('<p class="wow"></p>');
// 创建文本节点
$('hello world');
// 结合更实用
$('<p class="wow">hello world</p>');
添加元素
append() 在元素内部的结尾插入内容
$('p').append('<span>内部结尾</span>')
appendTo() 插入到所选元素内部的结尾
结果和 append()
一样 只是颠倒了位置
<p class="one">Always believe that good things are going to happen</p>
<p class="two">Always believe that good things are going to happen</p>
<p class="three">Always believe that good things are going to happen</p>
<span>new</span>
<script>
$('span').appendTo('.two')
</script>
prepend() 在元素内部的开头插入内容
$('p').prepend('<span>内部开头</span>')
prependTo() 插入到所选元素内部的头部
结果和 prepend()
一样 只是颠倒了位置
<p class="one">Always believe that good things are going to happen</p>
<p class="two">Always believe that good things are going to happen</p>
<p class="three">Always believe that good things are going to happen</p>
<span>new</span>
<script>
$('span').prependTo('.two')
</script>
### after() 在元素外部之后插入内容
```
$('p').after('<span>外部后面</span>')
![](https://images2018.cnblogs.com/blog/1321525/201809/1321525-20180907185454985-1055904183.png)
<br />
### before() 在元素外部之前插入内容
$('p').before('<span>外部前面</span>')
![](https://images2018.cnblogs.com/blog/1321525/201809/1321525-20180907185623794-1105993898.png)
<br />
## 删除元素
### remove() 删除整个元素
<p>Always believe that good things are going to happen</p>
<span>Persist</span>
<p>Always believe that good things are going to happen</p>
<span class="txt">Persist</span>
<script>
$('span').remove();
$('span').remove('.txt'); // 可筛选
</script>
![](https://images2018.cnblogs.com/blog/1321525/201809/1321525-20180908092327587-2000278392.png)
![](https://images2018.cnblogs.com/blog/1321525/201809/1321525-20180908092259179-1874399156.png)
<br />
### empty() 清空元素的所有子节点
<p>Always believe that good things are going to happen</p>
<span>Persist</span>
<p>Always believe that good things are going to happen</p>
<span class="txt"><a href="">Persist</a></span>
<script>
$('span').empty();
</script>
![](https://images2018.cnblogs.com/blog/1321525/201809/1321525-20180908092541891-730462301.png)
<br />
JQ DOM元素 创建 添加 删除的更多相关文章
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- dir(dict)|字典的创建-添加-删除-修改-判断存在-取值等相关操作
dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...
- HTML DOM的创建,删除及替换
创建HTML元素 document.appendChild() 将新元素作为父元素的最后一个子元素进行添加 如需向HTML DOM添加新元素,首先必须创建该元素,然后把它追加到已有的元素上 var n ...
- 如何在通过knockout数据绑定的DOM元素上添加事件
通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才 ...
- JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- js节点的创建添加删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SharePoint 服务器端对象模型操作用户组(创建/添加/删除)
摘要:几个操作SharePoint用户组的方法,已经测试通过,但是没有提升权限,如果没有权限的人操作,需要提升权限(提权代码附后).大家需要的话,可以参考下,写在这里也给自己留个备份~~ //创建用户 ...
- CentOS7下swap分区创建(添加),删除以及相关配置
在添加swap分区之前我们可以了解下当前系统swap是否存在以及使用情况,可用: 1. free –h 或 swapon –s 了解硬盘使用情况(一般/dev/vda1为挂载硬盘): 1. df –h ...
- 使用jquery将表单自动封装成json对象 /json对象元素的添加删除和转换
$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function ( ...
随机推荐
- [CF1311E] Construct the Binary Tree - 构造
Solution 预处理出 \(i\) 个点组成的二叉树的最大答案和最小答案 递归做,由于只需要构造一种方案,我们让左子树大小能小就小,因此每次从小到大枚举左子树的点数并检验,如果检验通过就选定之 现 ...
- Sikerio --《只狼》
“狼啊,替我断绝不死吧”
- 学习postgresql spi(一)
#include "postgres.h" #include #include "fmgr.h" #include "access/xlog.h&qu ...
- node-sass pip 安装报错,提示缺少python2
解决办法参考https://segmentfault.com/a/1190000010984731?utm_source=tag-newest npm uninstall node-sass npm ...
- 牛客寒假6-I 导航系统
链接:https://ac.nowcoder.com/acm/contest/3007/I来源:牛客网 题目描述 小 Q 所在的国家有 N 个城市,城市间由 N-1 条双向道路连接,任意一对城市都是互 ...
- 在iOS下-input[disabled] 颜色变浅兼容&& input[readonly]仍可获取焦点解决方法
目标:在写input输入框时,想让其只读不写. 环境:在iPhone上 本来用的时readonly,可是readonly,居然可以获取焦点,不能弹出键盘:安卓手机完全木有问题,所以去用了disable ...
- 第一个,net core项目,一起入门 !!!
最近项目上开始使用.net core,新的项目,熟悉的东西比较多,现在花点时间来梳理一下,重头开始搭建一个.net core项目.哈哈,这个相对老手来说,估计会觉得小儿科,没事,也就当一次分享总结罢了 ...
- C++->以读或写方式打开一个文件
以读或写方式打开一个文件 #include<iostream.h> //.h以C|非C标准引用库文件 #include<fstream.h> #include<std ...
- 19新生赛 谁更nb
题目描述: 有一堆石子共有N个.syx xxh两个人轮流拿,syx先拿.每次最少拿1颗,最多拿K颗,拿到最后1颗石子的人获 胜.syx xxh都非常聪明,拿石子的过程中不会出现失误.给出N和K,问最后 ...
- LeetCode136. 只出现一次的数字(异或)
给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: 输入: [ ...