快捷導(dǎo)航

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

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

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

1、動(dòng)態(tài)創(chuàng)建元素一 document.write()

例如向頁(yè)面中輸出一個(gè) li 標(biāo)簽

<pre class="html" name="code"><span style="font-size:12px;"><script>
  document.write("<li>123</li>");
</script></span>

body標(biāo)簽中就會(huì)插入但是這種方法幾乎不用，因?yàn)檫@回影響頁(yè)面的布局，甚至?xí)㈨?yè)面原來(lái)的內(nèi)容沖刷掉，從而只顯示輸出內(nèi)容

2、動(dòng)態(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)簽中就會(huì)插入一個(gè)p標(biāo)簽，并在在頁(yè)面上輸出“這是標(biāo)簽”，當(dāng)需要添加的標(biāo)簽比較多的時(shí)候使用這種方式。

3、動(dòng)態(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)建一個(gè)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)簽下面就會(huì)創(chuàng)建了一個(gè)li標(biāo)簽，當(dāng)需要?jiǎng)討B(tài)創(chuàng)建的標(biāo)簽比較少的時(shí)候就使用這種方式

以上就是小編為大家?guī)?lái)的JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

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