JavaScript 中的 outerHTML 屬性
outerHTML 是一個 JavaScript 屬性，允許你獲取和設定元素的 HTML。例如，如果你有一個如下的 HTML 標籤，那麼使用 outerHTML 屬性你會得到 <div> </div> 作為輸出。
<div>Text</div>
如果 div 具有 class 或 id 之類的屬性，你將使用 HTML 獲得所有此類詳細資訊。outerHTML 用於返回或設定元素的 HTML。
與此相反的是 innerHTML 屬性，它設定或返回標籤中存在的文字。在這種情況下，innerHTML 屬性將返回包含在 div HTML 標記中的單詞 Text。
讓我們舉一個例子，說明如何使用 outerHTML 屬性獲取和設定元素的 HTML。我們目前在我們的 HTML 中有一個單一的 div 元素，其 class 為 oldElement。
<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
現在讓我們看看如何為相同的 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 元素。
有關詳細資訊，請參見下圖。
まとめ
要獲取任何元素的 HTML，我們使用 outerHTML 屬性。此屬性返回元素的外部 HTML。它可以用一個新的 HTML 元素替換一個 HTML 元素，只是將新的 HTML 元素作為字串繞過該屬性。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn