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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
通过layer实现可输入的模态框的例子
Sep 27 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
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
老生常谈js数据类型
2017/08/03 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
银行办理业务介绍信
2014/01/18 职场文书
无保留意见审计报告
2015/06/05 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python