在前端开发中，如果我们需要对HTML文档进行操作，往往会将它们加载到文档片段（DocumentFragment）中。然而，在使用Internet Explorer浏览器时，可能会遇到一些问题。本篇文章将介绍如何在Internet Explorer中加载整个HTML文档到文档片段，并探讨其中的技术细节和指导意义。
问题描述
在大多数现代浏览器中，我们可以使用以下代码将HTML文档加载到文档片段中：
const fragment = document.createRange().createContextualFragment(htmlString);
这里的htmlString是一个包含完整HTML结构的字符串，可以是从服务器获取的HTML文档或由JavaScript代码生成的HTML代码。但是，在Internet Explorer 11及更早版本中，以上代码并不能正常工作。
具体来说，Internet Explorer中的createContextualFragment()方法只能将XML格式的内容转换为文档片段。因此，我们需要对HTML字符串进行转换才能在Internet Explorer中成功加载到文档片段中。
解决方案
有两种方式可以将HTML字符串转换为XML格式的字符串，以便在Internet Explorer中加载到文档片段中。
方式一：使用XMLSerializer
XMLSerializer是一个可以将DOM节点序列化为XML字符串的API。我们可以使用该API将HTML字符串转换为XML格式的字符串，然后再使用createContextualFragment()方法将它们加载到文档片段中。
const xmlString = new XMLSerializer().serializeToString(document.implementation.createHTMLDocument().documentElement); const fragment = document.createRange().createContextualFragment(xmlString);
这里我们使用了createHTMLDocument()方法创建了一个空的HTML文档，并将其根元素序列化为字符串。虽然这种方式可以成功地将HTML字符串转换为XML格式的字符串，但是它并不是最高效的方式。
方式二：使用innerHTML属性
在Internet Explorer中，我们可以将HTML字符串分配给一个元素的innerHTML属性，并使用该元素的outerHTML属性获取对应的XML格式的字符串。
const div = document.createElement('div');
div.innerHTML = htmlString;
const xmlString = div.outerHTML;
const fragment = document.createRange().createContextualFragment(xmlString);这个方式更加直观和高效，因为我们只需要创建一个空的div元素即可完成转换。
指导意义
尽管Internet Explorer已经退出历史舞台，但是作为一个前端开发者，我们仍然需要了解它的运作方式和技术细节。本篇文章介绍了如何在Internet Explorer中加载整个HTML文档到文档片段中，并提供了两种方式来解决这个问题。
除此之外，我们还可以使用其他工具或库来完成这个任务，比如jQuery、cheerio等。但是，理解底层的技术细节可以帮助我们更好地掌握前端开发中的基础知识和技能。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ---- -------- ---- -------- -------- -- ----------
-------
------
---- ---------------------
--------
----- ---------- - ----------- -------------
----- --- - ------------------------------
------------- - -----------
----- --------- - --------------
----- -------- - -----------------------------------------------------------
-----------------------------------------------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24638