jQuery简单创建节点的方法


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery简单创建节点的方法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素
  //包括元素节点,文本节点和属性节点
  //其中title='香蕉' 就是创建的属性节点
  var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
  //包括元素节点,文本节点和属性节点
  //其中title='雪梨' 就是创建的属性节点
  var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
  $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
  $parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2);
});
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图如下:

jQuery简单创建节点的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 Javascript
javascript 四十条常用技巧大全
Sep 09 #Javascript
前端弹出对话框 js实现ajax交互
Sep 09 #Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 #Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 #Javascript
JS图片放大效果简单实现代码
Sep 08 #Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 #Javascript
利用Vue.js指令实现全选功能
Sep 08 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
使用Python的内建模块collections的教程
2015/04/28 Python
解析Python中while true的使用
2015/10/13 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
pycharm新建一个python工程步骤
2019/07/16 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
一组SQL面试题
2016/02/15 面试题
校园餐饮创业计划书
2014/01/10 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers