用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 对象定义方法 简单易学
Mar 22 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
AngularJS入门之动画
Jul 27 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
vue中activated的用法
Jan 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
3.从实例开始
2006/10/09 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
javascript Demo模态窗口
2009/12/06 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
js中document.write的那点事
2014/12/12 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Python函数返回值实例分析
2015/06/08 Python
Python自动扫雷实现方法
2015/07/25 Python
利用Python如何生成随机密码
2016/04/20 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python numpy数组中的复制知识解析
2020/02/03 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
详解python对象之间的交互
2020/09/29 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Overload和Override的区别
2012/09/02 面试题
班主任班级寄语大全
2014/04/04 职场文书
财务管理制度范本
2015/08/04 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript