如何使用jQuery获取包含自身标签的子节点完整HTML代码？

问题场景 #

假设目标容器内的HTML结构如下：

<p>First element.</p>
<p>Second element.</p>
<p>Third element.</p>
<table>
    <tr>
        <td>Fourth element</td>
        <td>Still the fourth element</td>
    </tr>
</table>
<p>Fifth element.</p>

期望得到包含每个子节点自身标签的完整HTML数组：

children[0] = '<p>First element.</p>';
children[1] = '<p>Second element.</p>';
children[2] = '<p>Third element.</p>';
children[3] = '<table>\n    <tr>\n        <td>Fourth element</td>\n        <td>Still the fourth element</td>\n    </tr>\n</table>';
children[4] = '<p>Fifth element.</p>';

尝试的错误代码 #

使用jQuery的html()方法获取内容，仅能得到元素内部文本或子节点，丢失了自身包裹标签：

var children = [];
$('#page_html_source').children().each(function () {
    var line = $(this).html();
    children.push(line);
});

得到的错误结果：

children[0] = 'First element.';
children[1] = 'Second element.';
children[2] = 'Third element.';
children[3] = '\n    <tr>\n        <td>Fourth element</td>\n        <td>Still the fourth element</td>\n    </tr>';
children[4] = 'Fifth element.';

解决方案 #

使用DOM元素的outerHTML属性，或jQuery的prop('outerHTML')方法，即可获取包含自身标签的完整HTML代码。

修改后的代码：

var children = [];
$('#page_html_source').children().each(function () {
    // 方式1：直接访问DOM元素的outerHTML属性
    var line = this.outerHTML;
    // 方式2：使用jQuery的prop方法
    // var line = $(this).prop('outerHTML');
    children.push(line);
});

原理说明 #

• html()：仅返回当前元素内部的HTML内容，不包含自身的起始和结束标签。
• outerHTML：返回包含当前元素自身标签在内的完整HTML代码，完全匹配需求。

内容的提问来源于stack exchange，提问作者Alex