如何将通过this关键字选中的HTML元素序列化为字符串？

当然有办法啦！你遇到的问题是因为直接调用元素的toString()方法会返回它的对象类型描述（比如[object HTMLButtonElement]），而不是实际的HTML代码。这里有两种可靠的方法帮你实现需求：

方法一：使用原生outerHTML属性（推荐） #

这是最简单直接的方式，outerHTML是DOM元素的原生属性，会直接返回包含元素本身在内的完整HTML代码，完全符合你的要求。

修改你的代码如下：

function print(element) {
  console.log(element);
  // 使用outerHTML获取完整HTML字符串
  var x = element.outerHTML;
  console.log(x); // 输出：<button id="3" onClick="print(this)">B3</button>
}

这个属性兼容性极佳，现代浏览器（包括IE9及以上版本）都支持，几乎不用考虑兼容问题。

方法二：临时容器克隆法（兼容极老浏览器） #

如果你的场景需要兼容非常老旧的浏览器（比如IE8及以下，现在几乎没人用了），可以用这种间接方法：创建一个临时的<div>容器，把目标元素克隆后放入容器，再获取容器的innerHTML。

示例代码：

// 封装一个转换函数
function elementToHTMLString(element) {
  const tempContainer = document.createElement('div');
  // 克隆元素（true表示深克隆，包含子元素）
  tempContainer.appendChild(element.cloneNode(true));
  return tempContainer.innerHTML;
}

// 调用函数
function print(element) {
  console.log(element);
  var x = elementToHTMLString(element);
  console.log(x); // 同样输出目标HTML字符串
}

注意：这种方法会克隆元素，如果原元素有绑定的事件监听，克隆后的元素不会保留这些事件，但如果只是为了获取HTML结构，完全没问题。

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