在Web开发中，我们经常会遇到这样的场景：后端返回了一段HTML格式的字符串，或者用户在输入框里写了一段带标签的文本，希望前端能把它当成真正的网页结构渲染出来，而不是原样显示尖括号和标签名。这种把文本变成可运行HTML的过程，关键在于使用浏览器提供的解析接口，而不是普通的文本赋值方法。
为什么直接赋值文本无法运行HTML
很多初学者会尝试用元素的innerText或textContent属性把一段HTML字符串写进页面，结果在浏览器里看到的是<div>hello</div>这样的纯文字。这是因为innerText的设计目的就是设置或获取人类可读的文本内容，浏览器在赋值时会把字符串里的<和>当作普通字符处理，不会进入HTML解析器。
与之对应的是innerHTML属性，它接受的字符串会交由HTML解析器处理，标签会被转换成对应的DOM节点。不过直接使用innerHTML存在一些限制，例如插入的<script>标签不会自动执行，而且如果字符串来自不可信来源，容易造成跨站脚本攻击。理解这些底层差异，才能选对文本运行HTML的方法。
从解析原理上看，浏览器内核在拿到innerHTML的字符串后，会启动和加载普通页面相同的词法分析流程，生成节点树并挂载到指定元素下。脚本不执行是出于安全与历史兼容考虑，但像图片加载、样式应用、事件绑定（通过HTML属性写的行内事件）依然会生效。因此文本运行并不等于脚本全功能运行，这一点在后续方法中要特别注意。
使用innerHTML与insertAdjacentHTML注入文本
最直观的文本运行方式就是使用innerHTML。假设我们有一个容器<div id="box"></div>，想把一段HTML文本运行进去，只需要拿到字符串并赋值即可。下面的代码展示了基础用法，注意字符串里的标签会被真实解析为DOM结构：
var htmlText = '<p style="color:red;">这是一段<strong>运行后</strong>的HTML</p>';
var box = document.getElementById('box');
box.innerHTML = htmlText;
// 此时页面上会显示红色文字，并且“运行后”加粗
如果希望保留容器中已有的内容，只在前后或指定位置插入，可以使用insertAdjacentHTML。它接收两个参数，第一个是位置字符串（如beforeend表示在末尾插入），第二个是HTML文本。这种方法不会重刷整个容器的内部节点，性能比反复赋值innerHTML更好，也不会丢失已有元素上绑定的事件监听器。
示例代码如下，我们在原有内容后追加一段运行的HTML文本：
var extra = '<span>追加的文本节点</span>';
box.insertAdjacentHTML('beforeend', extra);
这两种方式都运行在当前的页面上下文中，插入的HTML可以访问页面已有的全局变量和样式，但也意味着如果文本包含恶意代码，它可能读取页面敏感信息。因此在运行用户提供的文本前，务必做白名单过滤，或者用DOMParser配合节点检查来剔除危险标签。
用DOMParser与Blob加iframe隔离运行
当我们需要运行的HTML文本是一个完整的页面，甚至包含自己的<style>和<script>，并且不希望它影响主页面时，可以使用DOMParser先解析，或者更彻底地用Blob对象配合iframe来隔离运行。DOMParser适合把文本变成文档片段后再筛选插入：
var parser = new DOMParser();
var doc = parser.parseFromString('<div class="demo">解析后的节点</div>', 'text/html');
var node = doc.querySelector('.demo');
document.getElementById('box').appendChild(node);
如果文本里有需要独立执行的脚本，最干净的做法是构造一个Blob URL并赋给iframe的src。这样文本在一个全新的浏览上下文里运行，主页面脚本和样式都不会渗透进去，特别适合做在线代码预览工具。代码展示如下：
var fullHtml = '<html><body><button onclick="alert(1)">点我</button></body></html>';
var blob = new Blob([fullHtml], {type: 'text/html'});
var url = URL.createObjectURL(blob);
var frame = document.createElement('iframe');
frame.src = url;
document.getElementById('box').appendChild(frame);
// iframe中的按钮可独立触发弹窗，不影响外部页面
使用iframe隔离虽然安全，但通信成本变高，主页面与iframe之间需要通过postMessage传递数据。对于简单的内容展示，直接用innerHTML系列方法更高效；对于不可信或功能完整的HTML文本，Blob加iframe是更稳妥的文本运行方案。根据实际信任等级和功能需求做取舍，才能把文本真正安全可控地运行起来。