javascript与jquery动态创建html元素示例


Posted in Javascript onJuly 25, 2016

本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考,具体如下:

1.javascript创建元素

创建select

var select = document.createElement("select");
elect.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
testDiv.appendChild(select);

创建div

var openDiv = document.createElement("div");
openDiv.id = "div3D";
openDiv.style.width = w+"px";
openDiv.style.height = h+"px";
openDiv.innerHTML = strHtml;
document.body.appendChild(openDiv);

2.jquery创建元素

function CreateDom() {
   var select = $("<select/>").appendTo($("body"));
   var option1 = $("<option value=\"1\">text1</option>").appendTo(select);
   var option2 = $("<option value=\"2\">text2</option>").appendTo(select);
   var option3 = $("<option value=\"3\">text3</option>").appendTo(select);
   var text = $("<input type=\"text\">").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body"));
   var checkbox = $("<input type=\"checkbox\" />").appendTo($("body"));
   var ul = $("<ul/>").appendTo($("body"));
   var li = $("<li>li1</li>").appendTo(ul);
   var li = $("<li>li2</li>").appendTo(ul);
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
Vue中props的详解
May 16 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 #Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 #Javascript
js微信分享API
Oct 11 #Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 #Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 #Javascript
Javascript的比较汇总
Jul 25 #Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 #Javascript
You might like
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
Node.Js中实现端口重用原理详解
2018/05/03 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python中按键来获取指定的值
2019/03/02 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
RealTek面试题
2016/06/28 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
十佳教师事迹材料
2014/01/11 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
出纳担保书范文
2014/04/02 职场文书
教师节宣传方案
2014/05/23 职场文书
公司离职证明标准样本
2014/10/05 职场文书
副总经理岗位职责
2015/02/02 职场文书
社区活动总结
2015/02/04 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书