原生JS创建DIV.

最新推荐文章于 2023-04-20 21:31:26 发布

华洛

最新推荐文章于 2023-04-20 21:31:26 发布

阅读量5.9k

点赞数 2

分类专栏： javascript 文章标签： JS创建节点 JS创建属性 JS创建DIV

本文链接：https://blog.csdn.net/sdta25196/article/details/78981469

版权

javascript 专栏收录该内容

95 篇文章 2 订阅

订阅专栏

Javascript代码:

[javascript]view plain copy 
   
 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代码:

[html]view plain copy 
   
 <!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>  