溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript中innerHTML屬性如何使用

發(fā)布時間:2022-10-17 09:18:13 來源:億速云 閱讀:115 作者:iii 欄目:開發(fā)技術

本文小編為大家詳細介紹“JavaScript中innerHTML屬性如何使用”,內容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“JavaScript中innerHTML屬性如何使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。

innerHTML

innerHTML屬性允許更改html元素的內容,可以設置或返回表格行的開始和結束標簽之間的HTML

innerHTML的寫法

對于element,設置innerHTML指定的元素名稱

element.innerHTML;

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

var sample1 = element.innerHTML

用指定元素替換變量的值

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

element.innerHTML = sample2;

清空指定的元素

        可以通過指定""來清空element元素的內容

element.innerHTML = "";

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

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

        運行結果如下

JavaScript中innerHTML屬性如何使用

 我們來看使用innerHTML屬性的結果

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

運行結果如下 

JavaScript中innerHTML屬性如何使用

清空指定的元素

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

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

JavaScript中innerHTML屬性如何使用

div標簽為txt的已經被innerHTML清空

讀到這里,這篇“JavaScript中innerHTML屬性如何使用”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI