JS中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)

更新時間：2016年10月20日 09:27:07 投稿：jingxian

下面小編就為大家?guī)硪黄狫S中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)常見的工具條效果
本文主要介紹了js實(shí)現(xiàn)常見的工具條效果的實(shí)例。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
JavaScript實(shí)現(xiàn)掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
原生js實(shí)現(xiàn)波浪導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)波浪導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
JavaScript 事件參考手冊
對于js的一些常見事件的總結(jié)
2008-12-12
淺談javascript中replace()方法
這篇文章主要介紹了淺談javascript中replace()方法，replace函數(shù)方法是返回根據(jù)正則表達(dá)式進(jìn)行文字替換后的字符串的復(fù)制，需要的朋友可以參考下
2015-11-11
node express使用HTML模板的方法示例
這篇文章主要介紹了node express使用HTML模板的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JS實(shí)現(xiàn)生成會變大變小的圓環(huán)實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)生成會變大變小的圓環(huán),涉及javascript數(shù)學(xué)運(yùn)算及頁面樣式動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
通過Tabs方法基于easyUI+bootstrap制作工作站
本教程給大家介紹如何制作easyUI+bootstrap工作站，主要學(xué)習(xí)tabs方法，本文介紹非常詳細(xì)，具有參考借鑒價值，需要的朋友參考下吧
2016-03-03
淺談js中字符和數(shù)組一些基本算法題
下面小編就為大家?guī)硪黄獪\談js中字符和數(shù)組一些基本算法題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
JS中作用域和變量提升(hoisting)的深入理解
相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實(shí)際代碼，希望能夠以一個比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。
2016-10-10