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 相关文章推荐
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
解决vue移动端适配问题
Dec 12 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
js实现时钟定时器
Mar 26 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
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php多文件上传实现代码
2014/02/20 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python探索之pLSA实现代码
2017/10/25 Python
Python字典遍历操作实例小结
2019/03/05 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
python sorted函数原理解析及练习
2020/02/10 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
企业环保标语
2014/06/10 职场文书
留学推荐信英文范文
2015/03/26 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android