开发者社区> 业余草> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

js动态创建div等元素实例

简介: <p>为了节省时间,就直接贴代码了!希望大家多多的关注我!</p> <p></p> <pre code_snippet_id="245094" snippet_file_name="blog_20140319_1_4128926" name="code" class="html">&lt;html&gt; &lt;head&gt; &lt;title&gt;js动态创建
+关注继续查看

为了节省时间,就直接贴代码了!希望大家多多的关注我!

<html>
    <head>
    <title>js动态创建div等元素实例</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <script language="javascript">
		var Test={
			createDiv:function(){
				var div = document.createElement('div');
				div.id="createDiv";
				div.style.cssText = 'border:1px solid red; width:200px; z-index:100; height:20px;';
				document.body.appendChild(div);
			},
			appendDivChild:function(){
				var div = document.createElement('div');
				div.id="appendDivChild";
				div.style.cssText = 'border:1px solid green; width:400px; z-index:100; height:100px;';
				var childDiv= document.createElement('div');
				childDiv.id="childDiv";
				childDiv.style.cssText = 'border:2px solid gray; width:200px; z-index:100; height:50px;';
				div.appendChild(childDiv);
				document.body.appendChild(div);
			},
			createSelect:function(){
				var select=document.createElement('select');
				select.id="select";
				var option1=document.createElement('option');
				option1.value=1;
				option1.text=1;//非ie,添加内容
				option1.innerHTML=1;//ie,添加内容
				select.appendChild(option1);
				var option2=document.createElement('option');
				option2.value=2;
				option2.text=2;
				option2.innerHTML=2;
				select.appendChild(option2);
				var option3=document.createElement('option');
				option3.value=3;
				option3.text=1;
				option3.innerHTML=3;
				select.appendChild(option3);
				document.body.appendChild(select);
			},
			createRadio:function(){
				var radio=document.createElement('input');
				radio.id='radio';
				radio.type="radio";
				radio.width="100";
				var label=document.createElement('label');
				label.text="男";
				label.innerHTML="男";
				document.body.appendChild(radio);
				document.body.appendChild(label);
			}
		};
		Test.createDiv();//创建div
		Test.appendDivChild();//为追加子div
		Test.createSelect();//创建下拉框
		Test.createRadio();//创建单选按钮
    </script>
	<select>
		<option>1</option>
		<option>2</option>
		<option>3</option>
	</select>
	</body>
</html>

下面看看效果截图:


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
BigData NoSQL:ApsaraDB HBase数据存储与分析平台概览
未来,我们将继续紧紧贴合云上用户需求打磨产品,打造核心竞争力,提升易用性,保障系统稳定性,以及引入Serverless特性以进一步降低成本。
1441 0
BigData NoSQL —— ApsaraDB HBase数据存储与分析平台概览
数据库发展有三个明显的趋势:1. 越来越多的数据库会做云原生(CloudNative);2. NoSQL正在解决BigData领域的问题;3. 越来越多的公司或者产品都是融合多个能力。 阿里云HBase经过公共云两年(单独的HBase在阿里内部已经发展快9年)的发展,融合开源Apache HBase、Apache Phoenix、Apache Spark、Apache Solr等开源项目,再加上一系列自研特性,满足 【一体化数据处理平台,提供一站式能力】。
4578 0
使用jstree创建无限分级的树(ajax动态创建子节点)
首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { ...
1198 0
Java Servlet class automatically generated by JVM
Java Servlet class automatically generated by JVM
24 0
动态创建一些常的html标签
原文:动态创建一些常的html标签 一段时间来,不管是在学习还是应用asp.net mvc应用程序,较多情况之下,需要动态创建一些html标签。如这篇《文本框下面有两个铵钮,点就加点减就减》http://www.cnblogs.com/insus/p/3741130.html 。
720 0
div+css布局入门
      你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。
791 0
+关注
业余草
业余草www.xttblog.com网站站长,CODE大全网站站长,爱分享www.ifxvn.com或www.ndislwf.com网站站长!
178
文章
8
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载