JS中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
1、動態(tài)創(chuàng)建元素一 document.write()
例如向頁面中輸出一個 li 標(biāo)簽
<pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span>
body標(biāo)簽中就會插入但是這種方法幾乎不用,因為這回影響頁面的布局,甚至?xí)㈨撁嬖瓉淼膬?nèi)容沖刷掉,從而只顯示輸出內(nèi)容
2、動態(tài)創(chuàng)建元素二 innerHTML
<span style="font-size:12px;"><body> <div id="box"></div> <script> var box = document.getElementById("box"); box.innerHTML = "<p>這是p標(biāo)簽</p>"; </script> </body></span>
div標(biāo)簽中就會插入一個p標(biāo)簽,并在在頁面上輸出“這是標(biāo)簽”,當(dāng)需要添加的標(biāo)簽比較多的時候使用這種方式。
3、動態(tài)創(chuàng)建元素三 document.createElement()
<span style="font-size:12px;"><body> <div id="box"></div> <script> var box = document.getElementById("box"); var li = document.createElement("li"); //創(chuàng)建一個li標(biāo)簽 li.innerHTML = "123"; //給li標(biāo)簽賦值 box.appendChild(li); //將創(chuàng)建好的li標(biāo)簽追加到box標(biāo)簽中 </script> </body></span>
div標(biāo)簽下面就會創(chuàng)建了一個li標(biāo)簽,當(dāng)需要動態(tài)創(chuàng)建的標(biāo)簽比較少的時候就使用這種方式
以上就是小編為大家?guī)淼腏S中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)全部內(nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
這篇文章主要介紹了JavaScript資源預(yù)加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來非常簡單,需要的朋友可以參考下2016-03-03Html+CSS+JS輪播圖實現(xiàn)源碼(手動輪播,自動輪播)
今天做網(wǎng)站的時候需要用上JS輪播圖代碼,而且還要求是原生的JS代碼,下面這篇文章主要給大家介紹了關(guān)于Html+CSS+JS輪播圖實現(xiàn)的相關(guān)資料,文中介紹的方法包括手動輪播和自動輪播,需要的朋友可以參考下2023-06-06JavaScript XML和string相互轉(zhuǎn)化實現(xiàn)代碼
兩個小function實現(xiàn)XML和string相互轉(zhuǎn)化,需要的朋友可以參考下。2011-07-07Chrome下ifame父窗口調(diào)用子窗口的問題示例探討
這篇文章主要介紹了Chrome下ifame父窗口調(diào)用子窗口的問題,需要的朋友可以參考下2014-03-03JavaScript 中使用Promise.all()方法經(jīng)驗技巧詳解
這篇文章主要為大家介紹了JavaScript 中使用Promise.all()方法經(jīng)驗技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10