如何在没有文档的情况下在 JavaScript 中创建 HTML 元素

在 JavaScript 中创建 HTML 元素通常需要在已有的 HTML 文档中使用 DOM API，但有些情况下需要在没有文档的情况下动态地创建 HTML 元素。下面介绍两种在没有文档的情况下创建 HTML 元素的方法。

方法一：使用 DOMParser

DOMParser 可以将字符串解析成 XML 或 HTML DOM，可以通过创建一个文档片段来创建元素。

const parser = new DOMParser();
const html = '<div>hello world</div>';
const doc = parser.parseFromString(html, 'text/html');
const fragment = doc.createDocumentFragment();
const div = fragment.appendChild(doc.querySelector('div'));

console.log(div); // <div>hello world</div>

首先创建一个 DOMParser 对象，然后将要创建的 HTML 字符串传递给 parseFromString 方法来解析 HTML DOM。然后使用 createDocumentFragment 方法创建一个文档片段，将解析后的 HTML 元素添加到文档片段中，最后通过 Fragment 上的 appendChild 方法将元素添加到 HTML 文档中。

方法二：使用 createElement 方法

createElement 方法是 Document 上的 API，可以直接在没有文档的情况下创建 HTML 元素。

const div = document.createElement('div');
div.textContent = 'hello world';

console.log(div); // <div>hello world</div>

通过 document.createElement 方法可以在没有文档的情况下直接创建 HTML 元素，然后通过属性和方法来设置元素的属性和内容。最后可以将元素添加到文档中。

以上两种方法都可以在没有文档的情况下创建 HTML 元素，根据具体场景可以选择使用其中一种。