首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js动态创建div等元素实例

js动态创建div等元素实例

作者头像
业余草
发布2019-01-21 16:04:07
12K0
发布2019-01-21 16:04:07
举报
文章被收录于专栏:业余草业余草

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

<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014年03月19日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档