原生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>