用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 异步页面查询实现代码(asp.net)
May 26 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
js style动态设置table高度
Oct 21 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
js实现分页功能
May 24 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
详谈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数字游戏 计算24算法
2012/06/10 PHP
php设计模式小结
2013/02/15 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
几种tab切换详解
2017/02/03 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python测试模块doctest使用解析
2019/08/10 Python
python递归下载文件夹下所有文件
2019/08/31 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
新手学python应该下哪个版本
2020/06/11 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
2015年政风行风工作总结
2015/04/21 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android