原生js创建一个div层

最新推荐文章于 2024-03-01 11:42:13 发布

烟囱土著

最新推荐文章于 2024-03-01 11:42:13 发布

阅读量1.7w

点赞数 4

分类专栏：起步

本文链接：https://blog.csdn.net/qq_29145989/article/details/51034183

版权

起步专栏收录该内容

22 篇文章 0 订阅

订阅专栏

原生js创建一个div层

Javascript代码:

function create(){
	//创建一个div
	var div = document.createElement("div");
	
	//为div创建属性class = "test"
	var divattr = document.createAttribute("class");
	divattr.value = "test";
	
	//把属性class = "test"添加到div
	div.setAttributeNode(divattr);
	
	//创建一个值为test的按钮
	var input = document.createElement("input");
	var inputattr = document.createAttribute("type");
	inputattr.value = "button";
	input.setAttributeNode(inputattr);
	var inputattr1 = document.createAttribute("value");
	inputattr1.value = "test";
	input.setAttributeNode(inputattr1);
	
	//创建一hello,world个文本节点
	var text = document.createTextNode("hello,world");
	
	//将按钮和文本节点追加到div
	div.appendChild(input);
	div.appendChild(text);
	
	//为div添加样式
	var style = document.createAttribute("style");
	div.setAttributeNode(style);
	div.style.backgroundColor = "#F00";
	div.style.borderWidth = "20px";
	div.style.borderColor = "#000";
	div.style.width = "500px";
	div.style.height = "500px";
	div.style.marginLeft = "30%";
	div.style.marginTop = "1%";
	
	//把div追加到body
	document.getElementsByTagName("body").item(0).appendChild(div);
}

HTML代码:

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="test.js"></script>
</head>

<body>

<input type="button" οnclick="create()" value="按钮" />

</body>
</html>