動態建立節點並且給建立的元素新增屬性

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