如何为文本添加HTML代码并将其插入DOM中显示？

你遇到的问题很常见——浏览器把你的HTML标签当成纯文本显示了，主要有两个原因：一是字符串的引号嵌套有语法错误，二是你可能用了会转义HTML的方法（比如textContent）插入内容。下面给你几种靠谱的解决办法：

方法一：使用innerHTML直接赋值 #

这是最直接的方式，innerHTML会让浏览器解析字符串里的HTML标签，而不是把它们当文本。首先要修正字符串的引号问题，避免JS语法报错：

// 用单引号包裹整个HTML字符串，内部用双引号（或者反过来，或者转义引号）
var styledText = '<font size="6">This is some text!</font>';
// 获取你要插入内容的DOM元素（这里假设元素id是"content-container"）
var targetElement = document.getElementById('content-container');
// 赋值给innerHTML，浏览器会自动解析HTML标签
targetElement.innerHTML = styledText;

方法二：用insertAdjacentHTML灵活插入 #

如果不想覆盖元素原有内容，或者想在特定位置插入HTML，可以用这个方法，它支持在元素的4个位置插入：beforebegin（元素前）、afterbegin（元素内开头）、beforeend（元素内结尾）、afterend（元素后）：

var styledText = '<font size="6">This is some text!</font>';
var targetElement = document.getElementById('content-container');
// 插入到元素内部的末尾，不会覆盖原有内容
targetElement.insertAdjacentHTML('beforeend', styledText);

方法三：手动创建DOM元素（更安全） #

如果你的内容来自用户输入，直接用innerHTML可能有XSS风险，这时候可以手动创建元素、设置样式，再添加到DOM：

// 创建font元素
var fontEl = document.createElement('font');
fontEl.size = 6;
// 设置文本内容（这里用textContent，不会解析HTML，更安全）
fontEl.textContent = 'This is some text!';
// 获取目标元素并添加进去
var targetElement = document.getElementById('content-container');
targetElement.appendChild(fontEl);

为什么你之前的写法不行？ #

你原来的代码里var text = '"<font size="6">This is some text!</font>"';有两个问题：

1. 引号嵌套错误：size="6"里的双引号和外层的双引号冲突，会导致JS语法报错；
2. 就算字符串正确了，如果用textContent插入，浏览器会把所有字符转义成纯文本，HTML标签自然不会生效。

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