HTML DOM outerHTML用法及代碼示例

DOM接口的externalHTML屬性提供了該元素的HTML片段。它不僅提供內容，還提供元素的整個HTML結構。它也可以用來替換元素的HTML結構。

用法:

返回externalHTML。
```
var value = element.outerHTML;
```

設置outerHTML。
```
element.outerHTML = "HTML_Structure";
```

返回值：獲取externalHTML時，它將返回HTML String數據。

範例1：本示例說明如何獲取id = “gfg”的元素的externalHTML。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>GeeksforGeeks</title> 
</head> 
  
<body> 
    <div id="gfg"> 
        <h1>GeeksforGeeks</h1> 
  
        <p>Welcome geeks!</p> 
    </div> 
      
    <script> 
        var g = document.getElementById("gfg"); 
        document.write(g.outerHTML); 
    </script> 
</body> 
  
</html>

輸出：

元素的externalHTML可以在輸出中看到：

範例2：本示例說明如何設置或更改externalHTML。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>GeeksforGeeks</title> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div id="d"> 
        Click on Button to change 
        the outerHTML. 
    </div> 
    <br> 
    <button onclick="changeouter()">click</button> 
    <script> 
        function changeouter() { 
            var gfg = document.getElementById("d"); 
            gfg.outerHTML =  
            "<h3>Hey Geeks! outerHTML is changed</h3>"; 
        } 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 HTML | DOM outerHTML property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。