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)簽中就會插入但是這種方法幾乎不用,因?yàn)檫@回影響頁面的布局,甚至?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)容了,希望大家多多支持腳本之家~
- JS動態(tài)創(chuàng)建元素的兩種方法
- js創(chuàng)建元素(節(jié)點(diǎn))示例
- 淺析JS動態(tài)創(chuàng)建元素【兩種方法】
- JavaScript數(shù)組Array對象增加和刪除元素方法總結(jié)
- JS 添加刪除元素的實(shí)現(xiàn)代碼
- js中數(shù)組插入、刪除元素操作的方法
- javascript動態(tài)創(chuàng)建及刪除元素的方法
- javascript刪除元素節(jié)點(diǎn)removeChild()用法實(shí)例
- JavaScript實(shí)現(xiàn)添加、查找、刪除元素
- javascript創(chuàng)建元素和刪除元素實(shí)例小結(jié)
相關(guān)文章
layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行
想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能,但發(fā)現(xiàn)layui并未集成該工具欄,因此,需要自己手動添加這個功能;這篇文章主要介紹了layui點(diǎn)擊按鈕給table添加一行,需要的朋友可以參考下2018-08-08JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
這篇文章主要介紹了JavaScript資源預(yù)加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來非常簡單,需要的朋友可以參考下2016-03-03Html+CSS+JS輪播圖實(shí)現(xiàn)源碼(手動輪播,自動輪播)
今天做網(wǎng)站的時候需要用上JS輪播圖代碼,而且還要求是原生的JS代碼,下面這篇文章主要給大家介紹了關(guān)于Html+CSS+JS輪播圖實(shí)現(xiàn)的相關(guān)資料,文中介紹的方法包括手動輪播和自動輪播,需要的朋友可以參考下2023-06-06JavaScript XML和string相互轉(zhuǎn)化實(shí)現(xiàn)代碼
兩個小function實(shí)現(xiàn)XML和string相互轉(zhuǎn)化,需要的朋友可以參考下。2011-07-07[JSF]使用DataModel處理表行事件的實(shí)例代碼
在使用JSF中,最常用的恐怕就要屬于表格的處理了。使用DataModel可以方便地進(jìn)行對表行的處理:2013-08-08JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的水波文字特效,實(shí)例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02JavaScript設(shè)計(jì)模式之策略模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之策略模式的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06Chrome下ifame父窗口調(diào)用子窗口的問題示例探討
這篇文章主要介紹了Chrome下ifame父窗口調(diào)用子窗口的問題,需要的朋友可以參考下2014-03-03JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解
這篇文章主要為大家介紹了JavaScript 中使用Promise.all()方法經(jīng)驗(yàn)技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10