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获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
如何给phpadmin一个保护
2006/10/09 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Django自定义用户认证示例详解
2018/03/14 Python
分析python请求数据
2018/08/19 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
三方合作意向书范本
2015/05/09 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫