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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
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使用base64加密解密图片示例分享
2014/01/20 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP的引用详解
2015/02/22 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
javascript 一些用法小结
2009/09/11 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
原生js调用json方法总结
2018/02/22 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
python中self原理实例分析
2015/04/30 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python工厂函数用法实例分析
2018/05/14 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
Pycharm修改python路径过程图解
2020/05/22 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
就业协议书怎么填
2014/04/11 职场文书
股东协议书范本
2014/04/14 职场文书
学校节能减排倡议书
2014/05/16 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书