极客教程如何使用jQuery获得一个元素的外部HTML
有时，需要通过它的id来获取整个HTML元素，而不仅仅是它的内容，为此，我们将使用HTML DOM outerHTML属性来获取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有多个HTML元素，或者没有，那么outerHTML将抛出一个错误，因为它被调用的是一个空值。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="demo">
<p>This is the text inside</p>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var newVar =
document.getElementById("demo").outerHTML;
alert(newVar);
}
</script>
</body>
</html>
输出:
<div id="demo">
<p>This is the text inside</p>
</div>
例子2：这个例子说明了outerHTML DOM只显示给定id的HTML元素，而不是它的父元素。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p id="demo">This is the text inside</p>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var newVar =
document.getElementById("demo").outerHTML;
alert(newVar);
}
</script>
</body>
</html>
输出:
<p id="demo">This is the text inside</p>