動態創建節點並且給創建的元素添加屬性

<script>
window.onload=function(){
var btn=document.createElement('button');//創建一個button標簽
document.body.appendChild(btn);//追加防止在body里面
btn.innerHTML="點擊";
btn.setAttribute("id","btn1");//給button添加一個id的屬性並且取名未btn1
var btn1=document.getElementById("btn1");//獲取id
btn1.onclick=function(){//給這個id添加一個點擊事件
btn.style.display="none";//點擊后隱藏這個按鈕
var div=document.createElement("div");//創建一個div
div.setAttribute("class","div");//給這個div一個class 的值並且命名為div
div.innerHTML="用戶名";//將用戶名放入在前面創建的div里面
div.style.cssText="width:50px;color:#000";//設置這個div的寬和字體顏色
document.body.appendChild(div);//將這個div放在body里面
var input1=document.createElement("input");//創建一個input標簽
input1.setAttribute("type","text");//給這個input標簽添加一個type的屬性和type的值text
document.body.appendChild(input1);//放在body里面（排序方式一次往后面排）
var br=document.createElement("br");//創建一個br標簽
document.body.appendChild(br);//放在body里面（排序方式一次往后面排）
var btn1=document.createElement("input");//創建一個input標簽
btn1.setAttribute("type","button");//給這個input標簽添加一個type的屬性和type的值button
btn1.setAttribute("value","登錄");//給這個input標簽添加一個value和value的值登錄
document.body.appendChild(btn1)//將btn1添加到body里面
}
}
</script>