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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
浅谈JavaScript中的“!!”作用
Aug 03 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来自动调用不同服务器上的flash
2006/10/09 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
Django 前后台的数据传递的方法
2017/08/08 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python数据挖掘需要学的内容
2019/06/23 Python
区分python中的进程与线程
2020/08/13 Python
详解anaconda安装步骤
2020/11/23 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
高级技校毕业生自荐信
2013/11/18 职场文书
前台领班岗位职责
2013/12/04 职场文书
大学学习生活感言
2014/01/18 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
法人身份证明书
2014/10/08 职场文书
80后婚前协议书范本
2014/10/24 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL