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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。