JavaScript 中的 outerHTML 屬性

  1. 在 JavaScript 中使用 outerHTML 獲取元素的 HTML
  2. 在 JavaScript 中使用 outerHTML 設定元素的 HTML
  3. 結論

outerHTML 是一個 JavaScript 屬性,允許你獲取和設定元素的 HTML。例如,如果你有一個如下的 HTML 標籤,那麼使用 outerHTML 屬性你會得到 <div> </div> 作為輸出。

<div>Text</div>

如果 div 具有 classid 之類的屬性,你將使用 HTML 獲得所有此類詳細資訊。outerHTML 用於返回或設定元素的 HTML。

與此相反的是 innerHTML 屬性,它設定或返回標籤中存在的文字。在這種情況下,innerHTML 屬性將返回包含在 div HTML 標記中的單詞 Text

讓我們舉一個例子,說明如何使用 outerHTML 屬性獲取和設定元素的 HTML。我們目前在我們的 HTML 中有一個單一的 div 元素,其 classoldElement

<body>
    <div class="oldElement">Text</div>
</body>

我們在 div 元素中新增了一些文字。首先,我們將看到如何使用 outerHTML 屬性獲取上述元素的 HTML,然後我們將看到如何用不同的 HTML 元素替換或設定這個 HTML div

在 JavaScript 中使用 outerHTML 獲取元素的 HTML

要獲取 div 元素的 HTML,我們首先必須使用其 class 屬性將 div 的引用儲存在 JavaScript 程式碼中,並使用 getElementsByClassName() 方法,這是 DOM API 的一部分.

<!DOCTYPE html>
<html>
    <body>
        <div class="oldElement">This is an old element.</div>
    </body>

    <script>
        var oldElement = document.getElementsByClassName('oldElement')[0];
        console.log(oldElement.outerHTML)
    </script>
</html>

由於我們使用其類名訪問元素,因此我們還必須在末尾使用 [0],因為 getElementsByClassName() 返回一個陣列,因為我們的 DOM 中只有一個具有該類名的元素。

因此,我們將訪問陣列的 [0] 元素。然後我們將該元素儲存在 oldElement 變數中。

要獲取儲存在 oldElement 變數中的該元素的 HTML,我們將在該變數上使用 outerHTML,如上所示的程式碼在控制檯上列印它。

輸出:

在 JavaScript 中使用 `outerHTML` 獲取元素的 HTML

在 JavaScript 中使用 outerHTML 設定元素的 HTML

現在讓我們看看如何為相同的 div 元素設定 HTML,我們已經使用 outerHTML 屬性將其儲存在 oldElement 變數中。

我們將使用賦值 (=) 運算子;由於我們想為這個元素設定或賦值,我們將使用賦值(=)運算子。

outerHTML 只接受字串形式的 HTML 元素。因此,我們使用 outerHTML 屬性將 h1 標記作為包含一些文字的字串分配給 oldElement 變數。

<!DOCTYPE html>
<html>
     <body>
         <div class="oldElement">This is an old element.</div>
     </body>

     <script>
         var oldElement = document.getElementsByClassName('oldElement')[0];
         oldElement.outerHTML = "<h1>This is an new element.</h1>";
     </script>
</html>

這將用這個新的 HTML 元素替換整個 div 元素及其值。如果你檢視 DOM 樹,你會看到 div HTML 元素已替換為 h1 HTML 元素。

有關詳細資訊,請參見下圖。

在 JavaScript 中使用 `outerHTML` 設定元素的 HTML

結論

要獲取任何元素的 HTML,我們使用 outerHTML 屬性。此屬性返回元素的外部 HTML。它可以用一個新的 HTML 元素替換一個 HTML 元素,只是將新的 HTML 元素作為字串繞過該屬性。

相關文章 - JavaScript Property

  • JavaScript nextSibling 屬性
  • 在 JavaScript 中建立私有屬性
  • JavaScript 中的 hasOwnProperty