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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
js验证账户名是否重复
May 26 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
js打造数组转json函数
2015/01/14 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python多线程使用方法实例详解
2019/12/30 Python
python用什么编辑器进行项目开发
2020/06/17 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python asyncio 协程库的使用
2021/01/21 Python
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
中专生自荐信
2013/10/12 职场文书
自我鉴定总结
2014/03/24 职场文书
红色旅游心得体会
2014/09/03 职场文书
九年级英语教学反思
2016/02/15 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server