用js动态添加html元素,以及属性的简单实例


Posted in Javascript onJuly 19, 2016

用js动态添加html元素,以及属性的简单实例

function test(){

//创建节点

var lswt_2=document.createElement("div");

//设置节点id

lswt_2.id='lswtColse';

//设置节点属性

lswt_2.style.width='11px';
lswt_2.style.height='10px';
lswt_2.style.top='0px';
lswt_2.style.right='0px';
lswt_2.style.position='absolute';
lswt_2.style.background='url(7.gif)';
lswt_2.style.backgroundRepeat='no-repeat';

//为这个节点添加点击时间

lswt_4.addEventListener("click",loc,false);

//把这个节点放到那里?放到id为lswt的元素下

var element_2=document.getElementById("lswt");

//插入这个节点

element_2.appendChild(lswt_2);

}

以上这篇用js动态添加html元素,以及属性的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
js实现碰撞检测
Jan 29 Javascript
详谈JS中实现种子随机数及作用
Jul 19 #Javascript
全面了解JavaScript对象进阶
Jul 19 #Javascript
EasyUI中在表单提交之前进行验证
Jul 19 #Javascript
jQuery EasyUI提交表单验证
Jul 19 #Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 #Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 #Javascript
JS动态给对象添加事件的简单方法
Jul 19 #Javascript
You might like
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
办公室人员先进事迹
2014/01/27 职场文书
开会迟到检讨书
2014/02/03 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
难忘的一天教学反思
2014/04/30 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
演讲稿的写法
2014/05/19 职场文书
施工质量承诺书范文
2014/05/30 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python