您的位置：首页 > Web前端 > JavaScript

原生js创建一个div层

2016-04-01 09:34 627 查看

原生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" onclick="create()" value="按钮" />

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航