原生JavaScript中如何将HTML字符串渲染为真实DOM而非文本

你整个实现里唯一卡住渲染的关键错误，是拼接HTML字符串时误用了HTML转义实体替代原生标签边界字符。

• 你在循环里写的拼接逻辑为：

  theOutput += '<span>' + item + '</span>';
  

  这里的<、>是专门用来转义尖括号的HTML实体。当浏览器解析带这类实体的字符串时，会直接把它当成普通文本展示，不会识别为HTML标签的起始、结束边界——这就是为什么你最后页面上显示的是纯文本的<span>Bar</span>，而不是真实的span DOM节点。
• 你引入的stringToHTML逻辑其实在当前需求里完全多余：innerHTML属性本身就具备把合法HTML字符串解析为真实DOM的能力，不需要额外套DOMParser做中转。

修正后可直接运行的代码 #

首先改掉转义实体的问题，移除冗余的DOMParser中转逻辑，同时清理原代码里的冗余赋值：

const mwInput = document.querySelector('.mw__input');
const mwOutput = document.querySelector('.mw__output');

document.querySelector('#alphabetize').addEventListener('click', function(){
  // 直接获取textarea内容，按换行分割后做字母排序
  const sortedLines = mwInput.value.split('\n').sort();
  let theOutput = '';

  sortedLines.forEach(item => {
    // 用原生尖括号拼接span标签，不要使用转义实体
    theOutput += `<span>${item}</span>`;
  });

  // 直接给innerHTML赋值即可完成DOM渲染
  mwOutput.innerHTML = theOutput;
});

补充注意：<、>这类HTML实体的正确使用场景，是当你需要把尖括号本身作为纯文本展示在页面上时——比如你要在教程页面展示“span标签的写法是内容”，为了避免浏览器把这段代码解析成真实标签，才需要把尖括号转成实体。只要你最终目标是生成可渲染的真实DOM，拼接字符串时就必须使用原生的<、>字符，不能用转义实体替代。

内容的提问来源于stack exchange，提问作者Brian Paskoff