如何从DOM元素创建HTML元素？附DOM元素获取相关说明

当然可以啦！从已有的DOM元素生成对应的HTML代码（或是创建新的DOM元素副本），有几个简单实用的方法，我给你拆解一下：

方法1：使用outerHTML直接获取完整HTML字符串 #

outerHTML是DOM元素的原生属性，它会返回包含元素自身在内的完整HTML代码，这是最直接的方式。比如你提到的那个id="Syntax"的标题元素：

// 先获取目标DOM元素
const targetElement = document.getElementById('Syntax');
// 获取该元素对应的完整HTML字符串
const elementHtml = targetElement.outerHTML;

// 如果需要用这个HTML字符串创建新的DOM元素
const container = document.createElement('div');
container.innerHTML = elementHtml;
// 容器的第一个子节点就是我们要的新元素
const newElement = container.firstChild;

方法2：用cloneNode()复制DOM节点 #

如果你不需要先转成HTML字符串，而是想直接复制一个一模一样的DOM元素，可以用cloneNode()方法，它会返回原元素的副本：

const originalElement = document.getElementById('Syntax');
// 传入true表示深拷贝，会复制元素的所有子节点和属性
const clonedElement = originalElement.cloneNode(true);

// 如果之后需要把这个副本转成HTML字符串，同样可以用outerHTML
const clonedHtml = clonedElement.outerHTML;

另外你提到从控制台复制的那段未格式化内容：

17:38:20.198 h2#SyntaxaccessKey: ""accessKeyLabel: ""align: ""attributes: NamedNodeMap [ id="Syntax", name="Syntax" ]baseU...

这其实是浏览器控制台对DOM元素对象的属性输出，比如h2#Syntax就是该元素的选择器标识，attributes字段里的内容就是元素的属性集合，这些信息也能帮我们确认元素的结构，辅助生成HTML。

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