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 页面执行时间计算代码
Mar 04 Javascript
Javascript 继承机制实例
Aug 12 Javascript
页面中js执行顺序
Nov 09 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
详解JVM系列之内存模型
Jun 10 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
消息持续发送的完整例子
2006/10/09 PHP
php遍历目录方法小结
2015/03/10 PHP
10条php编程小技巧
2015/07/07 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jquery foreach使用示例
2013/09/12 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Django 重写用户模型的实现
2019/07/29 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
中国梦口号
2014/06/13 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
外贸英文求职信范文
2015/03/19 职场文书
实习护士自荐信
2015/03/25 职场文书
女性健康讲座主持词
2015/07/04 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis