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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
快速入门Vue
Dec 19 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php实现文件下载实例分享
2014/06/02 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
java必学必会之static关键字
2015/12/03 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python实现ID3决策树算法
2018/08/29 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
计算机专业应届生求职信
2014/04/06 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
批评与自我批评范文
2014/10/15 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android