jQuery 如何先创建、再修改、后添加DOM元素
例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。
由于jQuery支持链式操作，其实就是设计模式的builder模式，所以我们可以把三个操作串在一起来执行。
首先创建一个p元素，内容包含一个a元素。
然后为a元素添加一个href属性
最后把新添加的p元素添加到body中
注意，这个地方需要执行end()操作，否则添加到body中的元素不是p元素变成了p元素中的a元素。
其实，end()操作不能等价与撤销，它返回的是previous selection，但是这个selection已经被end之前的操作修改过。
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$('<p><a>jQuery</a></p>').find('a').attr('href', 'http://www.jqeury.com').appendTo('body');
</script>
</body>
</html>
jQuery 如何先创建、再修改、后添加DOM元素的更多相关文章
- IntelliJ IDEA 创建web项目后添加Java EE （Tomcat）的依赖包
本文讲述的是IntelliJ IDEA 12版本 如果在编译器中创建一个web项目后,没有设置tomcat的依赖包,就不能成功的编译,会缺少javax.servlet.*等类. 添加的方法是: 打开p ...
- VS2015创建类库项目后添加不了WPF资源字典，窗口，用户控件处理办法
打开项目工程文件在PropertyGroup标签最后加上下面3行: <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FA ...
- VS2017创建类库项目后添加不了WPF资源字典
第一步: 先找到你需要添加的库类工程文件,位置如下: 第二步: 使用记事本文件打开,找到图片的位置,把三行代码粘贴进去,保存文件.重新打开项目: 三行代码如下: <ProjectTypeGuid ...
- 当使用listIterator进行迭代时候 list的迭代器可以在创建迭代器对象后 添加数据 但打印的时候不显示添加后的数据。 collection 的iterator迭代器不能添加数据 。list的对象与collection的实例对象都不能在创建迭代器后添加数据 list的迭代器保存的是循环前的数据长度
- jquery on=>keyup无法绑定未来js添加的元素
$("[name=red_count]").on("keyup", countKeyUpBind);即使使用on的,也无法绑定未来元素, 所以直接在动态添加的时 ...
- createElement创建标签及appendChild添加到元素的后面
var p = document.createElement('p'); var box = document.getElementsByTagName('div')[0]; box.appendCh ...
- JS添加DOM元素CSS权重BUG
修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽 ...
- 在容器最前面添加DOM元素 parent.insertBefore(new, parent.children[0])
//判断容器当前有没有子级元素,如果没有直接appendChild就行了; if (p.children[0]) { p.insertBefore(span, p.children[0]); } el ...
- jQuery中动态创建、添加元素的方法总结
<input type="button" value="创建元素" id="btn"> <div id="box ...
随机推荐
- Sqlite事物与锁
1事务 事务定义了一组SQL命令的边界,这组命令或者作为一个整体被全部执行,或者都不执行.事务的典型实例是转帐. 2事务的范围 事务由3个命令控制:BEGIN.COMMIT和ROLLBACK.BEGI ...
- ansible安装（批量执行命令
rpm安装 下载epl源 : Download the latest epel-release rpm from:http://dl.fedoraproject.org/pub/epel/6/x86 ...
- 229. Majority Element II My Submissions Question
Total Accepted: 23103 Total Submissions: 91679 Difficulty: Medium Given an integer array of size n, ...
- 第二十九篇、CoreAnimation的使用
使用的的三个步骤 1.初始化演员 2.设置好剧情 3.播放 主要类: CALayer // 绘图部分 CABaseAnimation // 基本动画(缩放,移动) CAKeyframeAnimatio ...
- iOS中的动画
iOS中的动画 Core Animation Core Animation是一组非常强大的动画处理API,使用它能做出非常绚丽的动画效果,而且往往是事半功倍,使用它需要添加QuartzCore .fr ...
- 捕获异常 winform
可以捕获winform中的异常写到文本中 <p>可以捕获winform中的异常写到文本中</p> <div class="cnblogs_code" ...
- Windows Forms (一)
导读 1.什么是 Windows Forms 2.需要学Windows Forms 么? 3.如何手写一个简单的Windows Forms 程序 4.对上面程序的说明 5.Form 类与Control ...
- 暑假集训(4)第四弹 -----排列，计数（hdu1465)
题意概括:嗯,纵使你数次帮助小A脱离困境,但上一次,小A终于还是失败了.那数年的奔波与心血,抵不过轻轻一指,便彻底 湮灭,多年的友谊终归走向末路.这一切重击把小A彻底击溃! 不为什么,你到底还是要继续 ...
- DEDECMS中，list标签和pagelist标签
列表数据标签:dede:list {dede:list col='' titlelen='' infolen='' imgwidth='' imgheight='' orderby='' pagesi ...
- Mongodb DB shell数据操作
shell命令操作语法和JavaScript很类似,其实控制台底层的查询语句都是用JavaScript脚本完成操作的. Ø 数据库 1.Help查看命令提示 help db.help(); db.yo ...