jquery 元素节点操作 - 创建节点、插入节点、删除节点
jquery的节点操作说明
前面的篇章对于jquery的元素操作大部分是使用html()
的方式来操作,这种直接使用字符串创建的方式也是性能最高的。
使用html()
操作节点
首先编写一个div
包含一个a
标签,如下:
下面来给这个a
的后面加上一个span
标签看看,如下:
在这里面可以看到,首先使用$('div').html()
得到原来的内部元素字符串,然后再拼接其他br
和span
元素字符串,再赋值回$('div').html()
内,这样就可以根据字符串操作好元素了。
如果能用这种方式操作元素就尽量用这种方式,因为这种方式操作元素的话性能最高。
另外还有其他创建节点、插入节点、删除节点的方法,如下:
var $div2 = $('<div>这是一个div元素</div>'); # 创建节点
append() appendTo() #在现存元素的内部,从后面插入元素
prepend() prependTo() #在现存元素的内部,从前面插入元素
after() insertAfter() #在现存元素的外部,从后面插入元素
before() insertBefore() #在现存元素的外部,从前面插入元素
创建节点
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点
1、append()和appendTo():在现存元素的内部,从后面插入元素
下面写一个div内部插入元素的示例如下:
$(function(){var $span = $('<span>这是一个span</span>');$('div').append($span);})
可以看到append
的方法就是父元素增加一个子元素节点,而appendTo()
则是反过来,是子元素增加到父元素的后面,写法如下:
$(function(){var $span = $('<span>这是一个span</span>');$span.appendTo($('div'));})
另外,还可以将现有的a
剪切到div
的最后,操作如下:
那么假设有两个a
标签呢?是否会批量直接剪切过来,还是要使用each()
方法遍历一遍?
直接就可以整体剪切过来。
2、prepend()和prependTo():在现存元素的内部,从前面插入元素
// 在前面插入一个p元素var $p = $('<p>这是一个p标签</p>');$('div').prepend($p);
下面来演示一下prependTo()
方法,如下:
// 在前面插入一个p元素var $p = $('<p>这是一个p标签</p>');$p.prependTo($('div'));
同样,也可以将已有的元素剪切至最前面。
$('a').prependTo($('div'));
3、after()和insertAfter():在现存元素的外部,从后面插入元素
写一个p
标签插入到div
的后面,如下:
//在div外部后面加一个p元素
$('div').after($p);
var $p = $('<p>这是一个p标签</p>');
$p.insertAfter($('div'));
4、before()和insertBefore():在现存元素的外部,从前面插入元素
在div
前面插入一个div #box2
的元素。
// 在div外部的前面加一个#box2 divvar $div2 = $('<div id="#box2">这是div2元素</div>');$('div').before($div2);
// 在div外部的前面加一个#box2 divvar $div2 = $('<div id="#box2">这是div2元素</div>');$div2.insertBefore($('div'));
删除节点
删除a
元素,如下:
// 删除节点
$('a').remove();
jquery 元素节点操作 - 创建节点、插入节点、删除节点相关推荐
- 属性 元素的内容 创建,插入和删除节点 虚拟节点
属性 html元素由一个标签和一组称为属性的名/值对组成. HTML 表示HTML文档元素的HTMLElement对象定义了读/写属性.映射了元素的HTML属性.HTMLElement定义了通用的HT ...
- jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点 动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法 元素内部插入子节点 元素内部插入子节点有两种 ...
- 常见算法:C语言中链表的操作(创建,插入,删除,输出)
链表中最简单的一种是单向链表,它包含两个域,一个信息域和一个指针域.这个链接指向列表中的下一个节点,而最后一个节点则指向一个空值. 一个单向链表包含两个值: 当前节点的值和一个指向下一个节点的链接 一 ...
- 089_DOM节点动态创建、添加和删除
1. 创建节点 1.1. 创建元素 document.createElement(tagName); 1.2. 创建文本 document.createTextNode("这是新文本.&qu ...
- 前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建,追加和删除)
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
- JavaScript学习笔记:创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点 文章目录 JavaScript学习笔记:创建.添加与删除节点 一.DOM对象节点类型 二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
- JS中创建、添加、删除节点
createElement():创建节点 appendChild():添加节点(还有一个很相似的 inertBefore():插入节点,两个参) removeChild():删除节点 <!DOC ...
- C语言 线性链表 节点的创建、添加和删除
注释说明以后再补,先给程序 #include <stdio.h> #include <stdlib.h>typedef struct svit {int x ; struct ...
- (C语言版)链表(四)——实现双向循环链表创建、插入、删除、释放内存等简单操作
http://blog.csdn.net/fisherwan/article/details/19801993 双向循环链表是基于双向链表的基础上实现的,和双向链表的操作差不多,唯一的区别就是它是个循 ...
- 单链表的创建、插入、删除、倒置操作
/*-----------------------------------------------------*/ /*--------------单链表的创建.插入.删除.倒置操作--------- ...
最新文章
- python pandas读取excel-Python使用Pandas读写EXCEL文件教程
- 哥伦比亚大学浙江大学计算机,大神offer | 恭喜C同学录取哥伦比亚大学-数据科学硕士!...
- Android开发之Git提交Template模板配置
- C库函数—strcpy实现
- idea修改文件名后出现main method should be static错误
- 开发VR游戏的基本要求
- python正则怎么取反_第11.19节 Python 中正则表达式的扩展功能:前视断言和前视取反...
- 一直在构建版本_教你如提升Gradle90%的构建速度
- (Step2-500题)POJ训练计划+SGU
- 数学建模笔记2方法分类
- 如何用纯 CSS 创作一只卡通鹦鹉
- OSPFv3中LSA详解(五)——Intra-Area-Prefix LSA详解
- 聊天记录没了怎么办?苹果手机微信聊天记录怎么恢复
- 用Python来合并图片(SoEasy)
- 少儿编程 电子学会图形化编程等级考试Scratch四级真题解析(判断题)2022年3月
- R语言Circos图可视化
- 2019/07/03 分布式系统概述(01)
- NIFI源码学习-(五、3)NIFI集群的FlowFile负载均衡实现-FlowFile传递
- 微软speeh sdk5.1安装及简单的读取文字
- ARM开发板哪家的好,怎么选择开发板
热门文章
- android 服务检测,Android检测某个服务是否还活着代码
- js原生ajax写法
- 一个因为兴趣而走上前端开发的程序员
- Sonya and Exhibition 【模拟】
- Hadoop3.2.1 【 YARN 】源码分析 : ApplicationMasterService 源码浅析 [ 一 ]
- 开启Fluter基础之旅二-------Future再论、常用组件、Material Design风格组件学习
- linux 创建wifi 热点_linux开启wifi和热点双用
- python3的numpy包中的numpy.logspace解析
- Java企业级开发框架(一):概述
- 笔记:文澜:桥接视觉和语言的大规模多模态预训练 WenLan: Bridging Vision and Language by Large-Scale Multi-Modal Pre-Training