jQuery拼接HTML标签元素
1. append & appendTo 的功能均为:在被选元素结尾(仍在元素内部)插入指定内容,但是内容和选择器的位置不同
(1) append()方法:
//在id为element元素内部末尾插入<p>拼接的元素</p>
$("#element").append("<p>拼接的元素</p>");
(2) appendTo()方法:
//在id为element元素内部末尾插入<p>拼接的元素</p>
$("<p>拼接的元素</p>").appendTo("#element");
2. insertBefore & before & insertAfter & after
(1) insertBefore() & before() 方法 :在被选元素前(元素外部)插入指定内容
//在id为element的元素前插入<p>拼接的元素</p>
$("<p>拼接的元素</p>").insertBefore("#element");
注:如果指定内容是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之前。
//在id为element的元素前插入<p>拼接的元素</p>
$("#element").before("<p>拼接的元素</p>");
(2) insertAfter() & after()方法:在被选元素后(元素外部)插入指定内容
//在id为element的元素后插入<p>拼接的元素</p>
$("<p>拼接的元素</p>").insertAfter("#element");
注:如果指定内容是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之后。
//在id为element的元素后插入<p>拼接的元素</p>
$("#element").after("<p>拼接的元素</p>");
jQuery拼接HTML标签元素的更多相关文章
- jQuery中 对标签元素操作(2)
一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p"); //获取<p>节点 var p_txt=$par ...
- jQuery中 对标签元素操作(1)
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append(" ...
- jQuery基础之获取和设置标签元素属性
jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- jQuery中常用的元素查找方法
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div&q ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...
- jQuery选取和操纵元素的特点
jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候, ...
- jquery动态添加的元素不能直接应用事件方法的时候
对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...
随机推荐
- Spring Boot(一):环境搭建,建立简单项目
一.基本环境搭建 1.下载IntelliJ IDEA :http://www.jetbrains.com/idea/ 2.拖到页面最下面下载旗舰版 3.新建项目 4.设置本地Maven 5.删除多于文 ...
- 2017(4)数据库系统,分布式数据库,NoSQL,反规范化
试题四(共 25 分) 阅读以下关于数据库分析与建模的叙述,在答题纸上回答问题 1至问题 3. [说明] 某电子商务企业随着业务不断发展,销售订单不断增加,每月订单超过了 50 万笔,急需开发一套新的 ...
- MySQL主从复制延迟的问题 #M1002#
MySQL主从复制延迟的问题 #M1002# https://mp.weixin.qq.com/s/NwFGER-qn2xQ5TnG-php1Q 更为糟糕的是,MySQL主从复制在大事务下的延迟.同样 ...
- Azure基础(三)- Azure的物理架构和服务保证
Azure fundamentals - Core Cloud Services - Azure architecture and service guarantees Azure provides ...
- Java基础(进制转换-)
进制概述: 进制也就是进位计数制,是人为定义的带进位的计数方法(有不带进位的计数方法,比如原始的结绳计数法,唱票时常用的“正”字计数法,以及类似的tally mark计数). 对于任何一种进制---X ...
- 排序之选择排序(SelectSort)
package com.sort; /* * 选择排序 * 把第一位与其他数进行比较,这样每轮比较都会出现一个最大值或最小值 * 根据需要让升序或降序排列 */ public class Select ...
- web自动化测试python+selenium学习总结----python环境安装
一.python下载地址:https://www.python.org/downloads/ 二.双击python的.exe文件安装: 后面直接点击“next” 步骤二:选择安装在D:\python3 ...
- 线段树 HDU-1754 I Hate It
附上原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某 ...
- java多线程之AtomicLong与LongAdder
AtomicLong简要介绍 AtomicLong是作用是对长整形进行原子操作,显而易见,在java1.8中新加入了一个新的原子类LongAdder,该类也可以保证Long类型操作的原子性,相对于At ...
- Linux 故障问题处理
一. Debian 网卡问题 原因: 网卡提示 Device Not Managed 处理方法: . 编辑/etc/NetworkManager/NetworkManager.conf: 将其 ...