jquery生成一个li_jquery-创建元素和添加子元素
一、创建新元素
1、使用$函数创建新元素
var $newElement=$('
段落
');//创建元素,返回jQuery对象
说明:
1)创建的新元素不会自动的把新元素插入到页面中,我们还需要明确的指定其插入到页面中的位置(比如使用append方法,指定
其插入位置为某个元素的最后一个子元素)
2)返回的jQuery对象中只包含html片段最顶层(外层)的元素,对于后代元素我们可以像处理页面中已有元素一样,使用
children或find方法访问 也就是说alert($newElement);的结果应为1
3)既然可以直接apend等方法插入html元素为何还要有这个创建新元素的功能?
使用$函数创建元素,是返回的是jQuery对象,我们可以使用jQuery对象里面的方法在创建的这个元素被插入到页面之前进行
各种操作比如进行绑定事件处理函数!
2、克隆已有的元素(通过克隆已有元素生成新元素)
使用clone方法以已有的元素(或者新创建的元素)为模子生成新元素
clone方法会复制jQuery对象内包含后代元素在内的所有元素
参数:
两个参数都是可选
第一个参数:
一个布尔值(true 或者 false)指示目标元素的事件处理函数以及关联数据是否会被复制
第二个参数(默认情况下与第一个参数一致):
一个布尔值,指示是否对克隆的元素的所有子元素的事件处理程序以及关联数据进行复制
二、添加子元素
1、append方法
在每个匹配元素内的 末尾处插入参数内容
参数类型说明:
1)普通字符串(可包含各种html标签)
$('body').append('html字符串');
2)jQuery对象
①使用$函数创建的新元素(jQuery对象)
②使用$函数获取页面中已经有的元素(jQuery对象)
此时会将已有的元素移动到目标元素内,就是被剪切了
1
2 $(function(){3 $getParagraph=$("p");//运行后p段落会变成div的子元素4 $("#oo").append($getParagraph);5 }6 );7
8
9
段落
10
③使用clone方法克隆页面中已经有的元素(jQuery对象)
$getParagraph=$("p").clone();//这样就避免了p段落会变成div的子元素
3)html元素对象、html元素对象数组
====以上类型的参数可传入多个,每个参数都会被插入到匹配元素!===
4)函数
有多少个匹配元素,这个函数就会执行多少次!
函数可以接受到两个参数:第一个是当前元素的序号、第二个是当前元素内的html
函数内部this代表当前的html元素对象
return 的数据就是插入的内容(可以为html元素,也可以是jQuery对象)
2、prepend方法
将参数内容插入到每个匹配元素内部的 最前面
使用方法及参数与append相同
3、appendTo方法
将匹配的元素插入到目标元素内部的最后面(同append)
与append区别:
使用时目标元素与插入内容的位置 颠倒
创建新元素返回的jQuery对象与
选择页面中已有元素返回的jQuery对象都可调用此方法(选择页面中已有元素表示将已有的元素移动到目标元素内)!
参数(表示要插入元素的目标位置):
Selector或者jQuery对象或者html元素对象/html元素对象数组
4、prependTo方法
将匹配的元素插入到目标元素内部的最前面(同prepend)
与prepend区别:
同上!
参数(表示要插入元素的目标位置):
同上!
jquery生成一个li_jquery-创建元素和添加子元素相关推荐
- jquery生成一个li_JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁 ...
- jquery 向html body 元素内添加子元素并设置样式知识点.txt
// 向网页body中添加元素. let innerHTML = '<div id="BIMFloors">BIM分层</div>'; $("bo ...
- 原生JS清空子元素+原生JS添加子元素
//获取父元素-清空子元素 let content = document.getElementsByClassName("table-page__text")[0]; //循环删除 ...
- js 获取元素,同级元素下的子元素总结
太原总结 不慌不慌,来日方长 ** 1.获取同级元素 form 下的 div 元素下的 input标签的value值 ** //html代码 <div id="replySubmit& ...
- 清除元素中的子元素html_HTML中的元素简介
清除元素中的子元素html An element is a fundamental component that is used to develop web pages. Generally an ...
- css审查元素一直有一块html,css父元素定位后子元素审查元素位置错乱
父元素position:fixed写了一个遮罩层,里面的子元素审查元素位置错乱,在超出这个元素的位置还能定位到这个元素 直播平台授权 .toolstip { position: fixed; left ...
- 父元素中拖动子元素实现
结果 过程 鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息 子元素要在父元素范围内拖动,那就有一个允许拖动的范围,子元素本身有宽高,这也是拖动范围计算要考虑的 首先获取mousedown的点 ...
- jq获取父元素下的子元素
导入jq库 通过parent获取父元素 children获取子元素 $(".make-order").click(function(e) {var theli =$(this).p ...
- CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
最新文章
- 正则表达式限制输入整数或小数
- mysql数据库出现无法登录(ERROR 1045 ),预防和解决及系列问题解决方法。
- UML中关联关系和依赖关系的区别(转)
- 高数第七版_习题解答_3-1行列式习题
- 1024 科学计数法 (20 分)(c语言)
- 赫塔•米勒获诺贝尔文学奖说明了什么?
- thinking-in-java(11) 持有对象
- java异常——分析堆栈跟踪元素+使用异常机制的技巧
- 12 个非常有用的 JavaScript 技巧
- QT之 Hello World
- 2.88万的五菱神车能赚钱吗?
- android 开发 - 结束所有activity
- 【数组】Triangle
- jsp+ssh+mysql Java web学生考勤管理系统源码附视频指导运行教程
- 一名合格的程序员应该是什么样子
- 5元的小乌龟吃什么_小乌龟吃什么最好?
- 我们是如何解决偶发性的 502 错误的
- 09-01-28 自助装机
- 利用URLOS搭建自己的CDN网站加速节点真是其乐无穷
- 在padavan运行wifidog
热门文章
- Golang 简洁架构实战
- shell if else 用法 syntax error near unexpected token `then'
- linux系统编程之进程(八):守护进程详解及创建,daemon()使用
- ../configure: /bin/sh^M: bad interpreter: No such file or directory
- ubuntu16安装mysql8.0
- springcloud 03_SpringCloud概述
- java try catch 异常后还会继续执行吗
- C# 对get和set的理解
- ES9的新特性:异步遍历Async iteration
- 小师妹学JavaIO之:目录还是文件