jQuery创建元素节点
2023-06-13 09:12:02 时间
在 jQuery 中,我们可以采用字符串的形式来创建一个元素节点,再通过 append( )、before( ) 等方法把这个字符串插入到现有的元素节点中。
图 1:默认效果
图 2:点击按钮后的效果
图 3:默认效果
图 4:点击按钮后的效果
语法:
//方式1 var str = 字符串 $().append(str); //方式2 $().append( 字符串 )
append( ) 方法表示把一个新元素插入到父元素内部的子元素的 末尾 。
举例:创建简单元素
!DOCTYPE html html head meta charset= utf-8 / title /title script src= js/jquery-1.12.4.min.js /script script $(function() { $( #btn ).click(function () { var $li = li jQuery /li $( ul ).append($li); /script /head body li HTML /li li CSS /li li JavaScript /li /ul input id= btn type= button value= 添加 / /body /html
默认情况下,预览效果如图 1 所示。
图 1:默认效果
我们点击【添加】按钮后,预览效果如图 2 所示。
图 2:点击按钮后的效果
点击【添加】按钮,会往 ul 元素内部的子元素的 末尾 添加一个 li 元素。
var $li = li jQuery /li
上面这一句代码表示创建一个字符串,然后将字符串赋值给变量 $li。其中 $li 只是一个变量名而已,当然你也可以命名为 a、str_li 等。不过,大家要注意一个变量的命名规范,凡是 jQuery 创建的节点字符串,我们命名的时候都习惯使用$开头,以便区别于其他的变量。
举例:创建复杂元素
!DOCTYPE html html head meta charset= utf-8 / title /title script src= js/jquery-1.12.4.min.js /script script $(function() { $( #btn ).click(function() { var $li = li a href= http://www.lvyestudy.com C语言中文网 /a /li $( ul ).append($li); /script /head body li a href= http://www.ptpress.com.cn/ Python教程网 /a /li li a href= http://www.epubit.com/ C++教程网 /a /li /ul input id= btn type= button value= 添加 / /body /html
默认情况下,预览效果如图 3 所示。
、图 3:默认效果
我们点击【添加】按钮后,此时预览效果如图 4 所示。
图 4:点击按钮后的效果
接触过 JavaScript 的小伙伴都知道,JavaScript 创建元素节点的方式要比 jQuery 创建元素节点的方式复杂得多。对于 jQuery 来说,不管添加多么复杂的元素节点,使用字符串的形式都可以轻松实现。
小伙伴们可以思考一下: 对于上面这个例子,如果使用 JavaScript 来实现,该怎么做呢? 然后我们可以对比一下 JavaScript 与 jQuery 的不同。
23798.html
cCSSC语言htmljavaJavaScriptpython相关文章
- vue.js和react.js_vue和jquery
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jQuery序列化表单为JSON对象详解编程语言
- 50个必备的实用jQuery代码段详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选详解编程语言
- jquery trigger使用方法详解编程语言
- JQuery插件模板制作jquery插件的朋友可以参考下
- jQuery温习篇强大的JQuery选择器
- jQuery.Validate使用笔记(jQueryValidation范例)
- 基于jQuery的倒计时插件代码
- jquery实现点击TreeView文本父节点展开/折叠子节点
- JQuery给元素添加/删除节点比如select
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- 如何使用Jquery获取Form表单中被选中的radio值
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- jquery获取子节点和父节点的示例代码
- 查看大图功能代码jquery版
- 解析jquery中的ajax缓存问题
- 移动节点的jquery代码
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jquery获取outerHtml包含当前节点本身的代码
- jquery.cookie.js使用指南