JavaScript中innerHTML使用方法實例

更新時間：2022年10月14日 11:40:19 作者：恰恰想學習

js中常常用到innerHTML,其作用就是獲取到標簽里面的內(nèi)容,同時也可以為標簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下

innerHTML

innerHTML屬性允許更改html元素的內(nèi)容,可以設(shè)置或返回表格行的開始和結(jié)束標簽之間的HTML,本篇文章就來給大家介紹關(guān)于innerHTML的用法

innerHTML的寫法

對于element,設(shè)置innerHTML指定的元素名稱

element.innerHTML;

將指定元素的html代碼分配給變量

var sample1 = element.innerHTML

用指定元素替換變量的值

通過如下編寫,可以在刪除element元素的內(nèi)容之后在element元素上顯示變量sample2的內(nèi)容

element.innerHTML = sample2;

清空指定的元素

可以通過指定""來清空element元素的內(nèi)容

element.innerHTML = "";

下面我們來看innerHTML使用的具體實例

<html>
    <head>
        <meta charset = "utf-8">
        <title></titke>
    </head>
    <body>
    <div id ="txt">
        <div id="txt1">文字內(nèi)容</div>
        <span id="txt2">文字內(nèi)容2</span>
 
    </div>
    <p>-----------------------</p>
    <div id = "innerHTML"></div>
</body>
</html>

運行結(jié)果如下

我們來看使用innerHTML屬性的結(jié)果

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <div id="txt">
        <div id="txt1">文字內(nèi)容</div>
        <span id="txt2">文字內(nèi)容2</span>
    </div>
    <p>-----------------------</p>
    <div id = "innerHTMLtxt"></div>
        <script type="text/javascript">
            innerHTMLtxt.innerHTML="恰恰走丟了"
          </script>
</body>
</html>

運行結(jié)果如下

清空指定的元素

可以通過指定""來清空element元素的內(nèi)容使用innerHTML來清空元素的代碼

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <div id="txt">
        <div id="txt1">文字內(nèi)容</div>
        <span id="txt2">文字內(nèi)容2</span>
    </div>
    <p>-----------------------</p>
    <div id = "innerHTMLtxt"></div>
        <script type="text/javascript">
            txt.innerHTML=""
            innerHTMLtxt.innerHTML="qq走丟了"
        </script>
</body>
</html>

div標簽為txt的已經(jīng)被innerHTML清空

總結(jié)

到此這篇關(guān)于JavaScript中innerHTML使用方法的文章就介紹到這了,更多相關(guān)js的innerHTML使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js
innerhtml

相關(guān)文章

利用JS生成博文目錄及CSS定制博客
這篇文章主要介紹了利用JS生成博文目錄及CSS定制博客的相關(guān)資料,需要的朋友可以參考下
2016-02-02
用javascript實現(xiàn)自動輸出網(wǎng)頁文本
這篇文章主要介紹了用javascript實現(xiàn)自動輸出網(wǎng)頁文本，用到兩個函數(shù)：setTimeout(),遞歸和String.substring();,需要的朋友可以參考下
2015-07-07
一個原生的用戶等級的進度條
做了一個用戶等級的進度條，只是練手。
2010-07-07
Bootstrap的popover(彈出框)在append后彈不出(失效)
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
javascript刷新父頁面方法匯總詳解
這篇文章主要介紹了javascript刷新父頁面方法匯總詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-10-10
客戶端js判斷文件類型和文件大小即限制上傳大小
需要腳本在客戶端判斷大小和文件類型，由于網(wǎng)上沒有適合的，就自己寫了一個并測試文件上傳大小限制的一個例子，在此與大家分享下
2013-11-11
如何實現(xiàn)動態(tài)刪除javascript函數(shù)
如何實現(xiàn)動態(tài)刪除javascript函數(shù)...
2007-05-05
這篇文章主要介紹了javascript與Python快速排序?qū)嵗龑Ρ?實例講述了javascript與Python實現(xiàn)快速排序的簡單實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08