如何用原生JS实现类似innerHTML功能的长尾词实例？

本文共计3410个文字，预计阅读时间需要14分钟。

都知晓浏览器和服务端是通过HTTP协议进行数据传输的，而HTTP协议是纯文本协议。因此，浏览器在接收到服务端传来的HTML字符串后，是如何将其解析成实际的DOM元素的呢？

浏览器接收到HTML字符串后，会按照以下步骤进行解析：

1. 解析HTML结构：浏览器首先解析HTML字符串的结构，创建DOM树。DOM树是由节点组成的，每个节点代表HTML文档中的一个元素，如``、`

`等。

2. 解析CSS样式：浏览器会解析页面中的CSS样式，并将其应用到对应的DOM元素上。这样，页面元素就有了相应的样式。

3. 构建渲染树：基于DOM树和CSS样式，浏览器会构建渲染树（Rendering Tree）。渲染树只包含需要显示在屏幕上的元素，不包含隐藏的元素和不可见的文本。

4. 布局（Layout）：浏览器根据渲染树中的元素位置和大小信息，计算页面布局。这个过程称为布局。

5. 绘制（Painting）：最后，浏览器根据布局信息将页面绘制到屏幕上。

在这个过程中，HTML字符串被转换成了实际的DOM元素，使得页面内容得以展示。

都知道浏览器和服务端是通过 HTTP 协议进行数据传输的，而 HTTP 协议又是纯文本协议，那么浏览器在得到服务端传输过来的 HTML 字符串，是如何解析成真实的 DOM 元素的呢，也就是我们常说的生成 DOM Tree，最近了解到状态机这样一个概念，于是就萌生一个想法，实现一个 innerHTML 功能的函数，也算是小小的实践一下。

函数原型

我们实现一个如下的函数，参数是 DOM 元素和 HTML 字符串，将 HTML 字符串转换成真实的 DOM 元素且 append 在参数一传入的 DOM 元素中。