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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
JS定时器实例
Apr 17 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
jQuery.each使用详解
Jul 07 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Vue声明式渲染详解
May 17 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JavaScript中如何调用Java方法
Sep 16 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/11/16 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
pandas的resample重采样的使用
2020/04/24 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
员工安全生产承诺书
2014/05/22 职场文书
爱国口号
2014/06/19 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
技术入股协议书
2016/03/22 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL