如何将HTML字符转换为DOM节点并动态添加到文档中详解

将HTML字符转换为DOM节点并动态添加到文档中，可以通过innerHTML属性、createRange和createContextualFragment方法、以及DOMParser接口来实现。

使用innerHTML属性

可以通过innerHTML属性将HTML字符串转换为DOM节点，并将这些节点添加到文档中。

// 获取包含HTML代码的字符串
const htmlString = '<div>这是一个动态添加的div元素</div>';

// 获取需要添加节点的父元素
const parentElement = document.getElementById('parent');

// 将HTML字符串赋值给innerHTML属性，自动转换为DOM节点并添加到父元素中
parentElement.innerHTML = htmlString;

使用createRange和createContextualFragment方法

createRange方法可以用来创建一个文档片段，createContextualFragment方法可以用来将HTML代码转换为DOM节点并添加到文档片段中。

// 获取包含HTML代码的字符串
const htmlString = '<div>这是一个动态添加的div元素</div>';

// 获取需要添加节点的父元素
const parentElement = document.getElementById('parent');

// 创建文档片段
const range = document.createRange();

// 将HTML字符串转换为DOM节点，并添加到文档片段中
const fragment = range.createContextualFragment(htmlString);

// 将文档片段添加到父元素中
parentElement.appendChild(fragment);

使用DOMParser接口

DOMParser接口可以将HTML代码转换为DOM节点，并将这些节点添加到文档中。

// 获取包含HTML代码的字符串
const htmlString = '<div>这是一个动态添加的div元素</div>';

// 获取需要添加节点的父元素
const parentElement = document.getElementById('parent');

// 创建DOMParser实例
const parser = new DOMParser();

// 将HTML字符串转换为DOM节点
const parsedHtml = parser.parseFromString(htmlString, 'text/html');

// 获取转换后的DOM节点，并添加到父元素中
parentElement.appendChild(parsedHtml.body.firstChild);

以上三种方法均可用于将HTML字符转换为DOM节点并动态添加到文档中，在具体实现时可根据实际需求选择其中一种方法。