jquery 插入节点
时间:2019-10-25
本文章向大家介绍jquery 插入节点,主要包括jquery 插入节点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
往某个元素内部的结尾添加
append()
appendTo()
append()
<body> <button id="bt1">点击通过jQuery的append添加元素</button> <div class="content"></div> <script type="text/javascript"> $("#bt1").on('click', function() { //.append(), 内容在方法的后面, //参数是将要插入的内容。 $(".content").append('<div class="append">通过append方法添加的元素</div>') }) </script> </body>
appendTo()
<body> <button id="bt2">点击通过jQuery的appendTo添加元素</button> <div class="content"></div> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()刚好相反,内容在方法前面, //无论是一个选择器表达式 或创建作为标记上的标记 //它都将被插入到目标容器的末尾。 $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content")) }) </script> </body>
往某个元素的前后添加,被添加元素在前面
before()
after()
before()
<body> <button id="bt1">点击通过jQuery的before添加元素</button> <div class="aaron"> <p class="test1">测试before</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在匹配test1元素集合中的每个元素前面插入p元素 $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>') }) </script> </body>
after()
<body> <button id="bt2">点击通过jQuery的after添加元素</button> <div class="aaron"> <p class="test2">测试after</p> </div> <script type="text/javascript"> $("#bt2").on('click', function() { //在匹配test1元素集合中的每个元素后面插入p元素 $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>') }) </script> </body>
往某个元素的前后添加,被添加元素在后面
insertBefore()
insertAfter()
insertBefore()
<body> <button id="bt1">点击通过jQuery的insertBefore添加元素</button> <div class="aaron"> <p class="test1">测试insertBefore,不支持多参数</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在test1元素前后插入集合中每个匹配的元素 //不支持多参数 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1")) }) </script> </body>
insertAfter()
<body> <button id="bt2">点击通过jQuery的insertAfter添加元素</button> <div class="aaron"> <p class="test2">测试insertAfter,不支持多参数</p> </div> <script type="text/javascript"> $("#bt2").on('click', function() { //在test2元素前后插入集合中每个匹配的元素 //不支持多参数 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2")) }) </script> </body>
往某个元素内部的首位置添加
prepend()
prependTo()
prepend()
<body> <button id="bt1">点击通过jQuery的prepend添加元素</button> <div class="aaron1"> <p>测试prepend</p> </div> <script type="text/javascript"> $("#bt1").on('click', function() { //在aaron1的首位置添加一个新的p节点,跟append位置相反 $('.aaron1').prepend('<p>prepend增加的p元素</p>') }) </script> </body>
prependTo()
<body> <div class="aaron2"> <p>测试prependTo</p> </div> <script type="text/javascript"> $("#bt2").on('click', function() { //找到class="aaron2"的div节点 //然后通过prependTo内部的首位置添加一个新的p节点 $('<p>prependTo增加的p元素</p>').prependTo($('.aaron2')) }) </script> </body>
原文地址:https://www.cnblogs.com/wzndkj/p/11738715.html
- 1.Django自学课堂 模板的使用
- 23.Django基础
- SpringBoot开发案例之整合Quartz注入Service
- 谈谈代码质量问题
- SpringCloud config配置文件加密
- SpringCloud服务比较快的下线配置
- 洛谷P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold
- 24.Django路由规则
- 洛谷P2852 [USACO06DEC]牛奶模式Milk Patterns
- 25.django Model
- 26.Django模板语言和分页
- 28.Django cookie
- 29.Django session
- 30.Django CSRF 中间件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Tomcat的源码分析
- Servlet的源码分析
- 设计模式之行为型模式
- 设计模式之结构型模式
- 设计模式之建造者模式与原型模式
- 设计模式之工厂模式
- Solr在分布式环境中的应用
- Docker基础与实战,看这一篇就够了
- org.springframework.beans.factory.NoSuchBeanDefinitionException:
- Vector 源码剖析
- java.util.concurrent.TimeoutException: 的解决!
- HTTP Status 503 - Server is shutting down or failed to initialize
- LinkedHashMap 源码剖析
- 基于SSM框架与Maven的CRUD案例
- Java 8的这个新特性,你用了吗?