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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
js a标签点击事件
Mar 30 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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模板中出现空行解决方法
2011/03/08 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
Oracle性能调优原则
2012/05/03 面试题
护士专业推荐信
2013/11/02 职场文书
大专生自我评价
2014/01/28 职场文书
快餐公司创业计划书
2014/04/29 职场文书
户籍证明模板
2014/09/28 职场文书
军训个人总结
2015/03/03 职场文书
倡议书格式及范文
2015/04/29 职场文书
具结保证书范本
2015/05/11 职场文书
创业计划书之干洗店
2019/09/10 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
tree shaking对打包体积优化及作用
2022/07/07 Java/Android