能否将HTML元素标签存入JS变量？innerHTML渲染原理解析

你疑惑的核心误区是混淆了「JS语法解析阶段」和「DOM渲染阶段」的处理逻辑，逐段拆解如下：

为什么script标签里不能直接写HTML标签 #

浏览器加载页面时是逐行解析HTML文档的，遇到<script>标签会立刻切换到JS脚本解析模式：这个模式下所有内容都会被JS引擎当成代码做语法校验，如果你直接在脚本块里写不带引号的<ul>、<li>，JS引擎会把尖括号识别成位运算符、把标签名识别成未定义的变量，直接抛出语法错误，根本不会运行。

拼接过程中标签只是普通字符串 #

你的代码里所有被引号包裹的<ul>、<li>、</ul>，在for循环拼接的整个过程中，对JS引擎来说和普通文本没有任何区别：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "<ul>";
for (let i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

这段代码运行时，JS只会老老实实做字符串拼接，最终text变量存的就是一整段内容为<ul><li>Banana</li><li>Orange</li><li>Apple</li><li>Mango</li></ul>的文本，全程不会对字符串里的尖括号做任何特殊处理，更不会直接生成页面元素。

真正触发渲染的是innerHTML赋值操作 #

最后一行代码才是让字符串变成可见列表的核心：

document.getElementById("demo").innerHTML = text;

innerHTML是DOM元素的内置属性，当你给这个属性赋值字符串时，浏览器会自动调用内置的HTML解析器，把传入的字符串按照标准HTML语法解析成真实的DOM节点（这里就是1个无序列表元素+4个列表项子元素），再把这些节点插入到id为demo的元素内部，最终渲染到页面上。

补充说明 #

• 这种方式生成的列表和你直接在HTML文件里手写ul、li标签生成的DOM结构完全一致，区别只是前者是页面初始加载时解析静态HTML生成，后者是JS运行时动态触发解析生成。
• 如果删掉最后一行innerHTML赋值的代码，不管你怎么拼接text变量，页面上都不会出现任何列表内容——因为存着标签的字符串从来没有被交给HTML解析器处理。

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