js动态创建div等元素实例-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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>

下面看看效果截图:


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

分享: