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

用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元素,以及属性的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS函数修改html的元素内容,及修改属性内容的方法

    修改元素内容: <body> <p id="pid">Hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } </script>

  • JS操作HTML自定义属性的方法

    本文实例讲述了JS操作HTML自定义属性的方法.分享给大家供大家参考.具体如下: HTML代码如下(其中的displayName为自定义属性): 复制代码 代码如下: <input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: 复制代码 代码如下: document.getElementById("txtBox").getAttribute(&q

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

  • js innerHTML 改变div内容的方法

    改变文字innerHTML每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记.通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页.但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠.首先,你必须给予部分要更改身份证.与标识到位,你将能够使用getElementById功能,适用于所有的浏览器.在您认为建立您现在就可以操纵文字的要素.要开始了,让我们尝试改变文字一个大胆的标记.下面我们来看一个用js的inn

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

    用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.st

  • 动态改变div的z-index属性的简单实例

    复制代码 代码如下: <script language="javascript"> var MAX_INDEX=4; function change(ddd) { if(ddd.style.zIndex<= MAX_INDEX) { ddd.style.zIndex = MAX_INDEX+1; MAX_INDEX++; } } </script> <div id="layer1" onclick="javascript

  • JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>

  • javaScript动态添加Li元素的实例

    html代码块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>**javaScript动态添加Li元素**</title> <style type="text/css"> ul li{list-style:none;display:block;text-align:left;} ul li span{displ

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • JS如何实现动态添加的元素绑定事件

    JS如何实现动态添加的元素绑定事件

    这篇文章主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • 通过js动态创建标签,并设置属性方法

    当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个div的事例: <script> function fun(){ var frameDiv = document.createElement("div");//创建一个标签 var bodyFa = document.getElementById("bodyid&quo

  • 详解原生JS动态添加和删除类

    由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等到一个 dom 对象(也叫dom元素), 通过document.getElement--的几种方法得到 如` let element = document.getElementById("box"); 1.通过类名, 获取类名: el.className, 赋值: el.className = "clas

  • js动态添加带圆圈序号列表的实例代码

    js动态添加带圆圈序号列表的实例代码

    1.先在body里面添加ul标签 <!-- 无序列表 --> <ul id="list"> </ul> 2.通过js获取到id等于list的标签 定义一个空字符串用来连接增加的标签,并展示出来 如图的js代码展示的是前三个颜色不同,余下的颜色相同的圆圈序号 function autoAddList(){ var oUl = document.getElementById('list'); // var arr = ['湖南','广西','新疆','上

随机推荐