JavaScript中innerHTML如何使用

JavaScript中innerHTML如何使用，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

　　JavaScript innerHTML怎么使用

　　( 1 ) innerHTML可以向指定的節(jié)點(diǎn)直接插入HTML代碼。

　　語法：

　　nodeObject.innerHTML=HTMLCode

　　其中，nodeObject 為節(jié)點(diǎn)對象，HTMLCode 為HTML代碼。

　　注意：innerHTML 會(huì)覆蓋原來的HTML代碼。

　　舉例，向 id="demo" 的節(jié)點(diǎn)添加三個(gè)新節(jié)點(diǎn)：

　　div id="demo">

　　div>點(diǎn)擊這里添加新節(jié)點(diǎn)/div>

　　/div>

　　script type="text/javascript">

　　document.getElementById("demo").onclick=function(){

　　this.innerHTML="div>這是新節(jié)點(diǎn) 1/div>div>這是新節(jié)點(diǎn) 2/div>div>這是新節(jié)點(diǎn) 3/div>";

　　}

　　/script>

　　Javascript怎樣獲取兄弟節(jié)點(diǎn)

　　所謂兄弟節(jié)點(diǎn)，是指當(dāng)前節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)或下一個(gè)節(jié)點(diǎn)。

　　獲取上一個(gè)節(jié)點(diǎn)

　　在Javascript中，通過 previousSibling 來獲取上一個(gè)節(jié)點(diǎn)。

　　語法：

　　nodeObject.previousSibling

　　其中，nodeObject 為節(jié)點(diǎn)對象(元素節(jié)點(diǎn))。

　　在IE下，會(huì)忽略節(jié)點(diǎn)間的空白節(jié)點(diǎn)(空格、回車和Tab鍵);在遵循W3C規(guī)范的瀏覽器(Chrome、FireFox、Safari等)下則不會(huì)。

　　請看下面一段代碼：

　　#demo{

　　height:180px;

　　width:250px;

　　padding:0px 10px 10px 10px;

　　border:1px solid #ccc;

　　background-color:#ededed;

　　}

　　#demo div{

　　height:50px;

　　width:250px;

　　margin-top:10px;

　　text-align:center;

　　line-height:50px;

　　background-color:#ccc;

　　}

看完上述內(nèi)容，你們掌握J(rèn)avaScript中innerHTML如何使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！