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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
微信小程序实现侧边分类栏
Oct 21 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
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python中map()与zip()操作方法
2016/02/27 Python
简单了解Python中的几种函数
2017/11/03 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python flask安装和命令详解
2019/04/02 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Python logging模块handlers用法详解
2020/08/14 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
银行类自荐信
2014/02/04 职场文书
股东协议书
2014/04/14 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
教师节领导致辞
2015/07/29 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python