前端學習代碼實例-JavaScript動態創建div並寫入文本
阿新 • • 發佈：2019-04-29
文本節點 win func web head sof 一個 type 更多 介紹一下如何利用JavaScript動態創建div元素，然後在其中寫入文本。
代碼實例如下：
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端開發學習扣qun：731771211 詳細教程分享</title> <script> window.onload=function(){ let odiv=document.createElement("div"); let textNode=document.createTextNode("學習前端，我們是認真的"); odiv.appendChild(textNode); odiv.style.color="blue"; document.body.appendChild(odiv); } </script> </head> <body> </body> </html>
上述代碼實現了我們的需求，代碼分析如下：
（1）.通過document.createElement方法創建一個div元素節點。
（2）.document.createTextNode方法創建一個文本節點，並設置文本內容為"螞蟻部落"。
（3）.odiv.appendChild方法將文本節點追加到div元素中，到現在頁面依然沒有任何內容，因為雖然元素節點對象和文本節點對象都已經創建，但是並沒有被添加到頁面被瀏覽器渲染，雖然還需要最後一步將其添加到body中，使用document.body.appendChild(odiv)即可實現。
更多編程知識分享，關註v-x公眾號id:mtbcxx
前端學習代碼實例-JavaScript動態創建div並寫入文本