如何为JavaScript变量中的HTML文本应用CSS样式？

你之前的写法之所以没生效，是因为你把jQuery的.css()方法直接当成字符串内容写进去了——浏览器只会把这串字符当作普通文本渲染，根本不会执行这个JS方法。下面给你几种可行的方案：

方法1：使用HTML内联样式 #

直接在变量里的HTML标签中添加style属性，把样式写在里面，这样插入到DOM后会直接生效：

var text='<br>Hello<br><br><ul style="color:red; border:3px solid black">';
// 示例：把文本插入到页面中
$('body').append(text);

方法2：插入DOM后用jQuery动态添加样式 #

先把HTML字符串插入到页面，再用选择器选中目标元素，调用.css()方法设置样式（推荐用class来定位元素，更灵活）：

// 给ul加上自定义class方便选择
var text='<br>Hello<br><br><ul class="styled-list">';
// 先把文本插入DOM
$('body').append(text);
// 选中元素并设置样式
$('.styled-list').css({
  color: 'red',
  border: '3px solid black'
});

方法3：原生JS创建元素并设置样式 #

如果不用jQuery，也可以用原生JS创建元素，直接设置样式后再插入到页面：

// 先创建ul元素
const ulElement = document.createElement('ul');
// 直接设置样式
ulElement.style.color = 'red';
ulElement.style.border = '3px solid black';

// 构建文本部分并插入到页面
const text = '<br>Hello<br><br>';
document.body.innerHTML += text;
// 把ul元素添加到页面
document.body.appendChild(ulElement);

核心思路就是：HTML字符串只是页面的结构内容，样式要么直接写在HTML的style属性里，要么等元素被添加到DOM树之后，再用JS/jQuery去操作元素的样式，不能把JS方法混在HTML字符串里哦～

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