如何使用 jQuery 获取元素的外部 html？

有时，需要通过 id 获取整个 HTML 元素而不仅仅是其内容，为此，我们将使用 HTML DOM 的外层 HTML 属性来获取 HTML 元素的外部 HTML。

句法：

document.getElementById("your-element-id").outerHTML)

您可以使用一个变量并将其初始化为上述内容以获取外部 HTML 元素的值。下面的示例说明了如何获取 HTML 元素的外部 HTML 元素并将其存储在变量 newVar 中。

示例 1：在此示例中，它有一个 div，它包含一个id = “demo”的段落。当屏幕上的按钮被按下时，JavaScript 会在浏览器窗口上推送一条带有给定 id 的 HTML 元素的外部 HTML 的警报消息。 myFunction使用getElementbyId函数获取具有给定 id 的元素，然后获取该元素的外层 HTML。如果给出的 id 使得有多个具有该 id 的 HTML 元素或没有，则外部 HTML 将在调用空值时抛出错误。

HTML

    
    
    
        
              
This is the text inside
  
        
  
        Try it
  
        
            function myFunction() {
                var newVar = 
                  document.getElementById("demo").outerHTML;
                alert(newVar);
            }
        
    

输出：

    
This is the text inside

示例 2：此示例说明了外层 HTML DOM 仅显示给定 id 的 HTML 元素，而不显示其父元素

HTML

    
    
    
        
            This is the text inside
  
        
  
        Try it
  
        
            function myFunction() {
                var newVar = 
                 document.getElementById("demo").outerHTML;
                alert(newVar);
            }
        
    

输出：

This is the text inside