文档章节

JavaScript动态添加标签元素

听那水
 听那水
发布于 2015/03/30 19:12
字数 260
阅读 11
收藏 0

1、首先,只有一个空的HTML文档,只在页面加载时,载入一个函数appendOneInput():

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DHTML</title>  
 
</head>  
<body onLoad="appendOneInput();">     
</body>  
</html>

2、添加JavaScript语句:

<script>  
	function appendOneInput()
	{  
		//创建元素  
		var myElement = document.createElement("input");//输入想要创建的类型  
		myElement.type="text";  
		myElement.value="我是按钮";  
		myElement.id="id1";  
		myElement.style.backgroundColor ="rgba(255,0,9,0.4)";
		myElement.style.border = "2px solid #f00";
		myElement.style.height = "30px";
		myElement.style.fontSize = "16px";
		myElement.style.textAlign = "center";
		//将元素添加到指定的节点  
		//document.getElementById("div1").appendChild(myElement);  
		document.body.appendChild(myElement);  
	}   
</script>

搞定。

当然,你也可以不用载入页面时就加载函数,可以吧appendOneInput()函数绑定到一个button中,通过点击button来冬天调用函数。

© 著作权归作者所有

听那水
粉丝 1
博文 9
码字总数 4697
作品 0
青岛
网页/平面设计
私信 提问
高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更...

Junn
2014/10/10
0
2
JavaScript实现动态添加、移除元素或属性的方法分析

本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 向节点的子节点列表的末尾添加新的子节点。 在已有子节点之...

前端小攻略
01/06
0
0
JavaScript的性能优化:加载和执行

js最大的问题是:无论当前JavaScript代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器...

EDIAGD
2013/09/07
0
14
js笔记十七之DOM操作-增删改

DOM的赠删改 增 真是项目中, 我们会在js中动态创建一些html标签, 然后把其增加到页面中 document.createElement 在js中动态创建一个html标签 appendChild 容器.appendChild(新元素) 把当前创...

uplyw
2018/05/11
0
0
前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄
2018/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
8
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
2
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部