如何为JS动态创建的<ion-list>项中指定文本设置差异化样式？

你可以通过两种方式实现仅让enteredName部分加粗：

方法1：使用innerHTML构建内容（简单直接） #

直接通过innerHTML给ion-item设置带HTML标签的内容，把需要加粗的名字用<strong>或<b>包裹：

const reviewList = document.getElementById('review-list');
// 替换为你的实际变量
const enteredName = '用户昵称';
const enteredRating = 5;

const ionItem = document.createElement('ion-item');
// 用strong标签包裹名字实现加粗
ionItem.innerHTML = `<strong>${enteredName}</strong> - ${enteredRating}/5`;

reviewList.appendChild(ionItem);

注意：如果enteredName是用户输入的内容，要先转义特殊字符（比如<、>）避免XSS风险，比如用enteredName.replace(/[&<>"']/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'})[char])处理后再插入。

方法2：创建独立DOM节点（更安全） #

通过创建多个文本/元素节点拼接内容，完全避免HTML注入风险：

const reviewList = document.getElementById('review-list');
const enteredName = '用户昵称';
const enteredRating = 5;

const ionItem = document.createElement('ion-item');

// 创建加粗的名字元素
const nameElement = document.createElement('strong');
nameElement.textContent = enteredName;

// 创建分隔符文本
const separator = document.createTextNode(' - ');

// 创建评分文本
const ratingText = document.createTextNode(`${enteredRating}/5`);

// 依次添加到ion-item中
ionItem.appendChild(nameElement);
ionItem.appendChild(separator);
ionItem.appendChild(ratingText);

reviewList.appendChild(ionItem);

符合Ionic规范的写法 #

如果你想遵循Ionic的组件样式规范，可以用<ion-text>配合内联样式或CSS类实现加粗：

// 替换方法1中的innerHTML部分
ionItem.innerHTML = `<ion-text style="font-weight: bold;">${enteredName}</ion-text> - ${enteredRating}/5`;

之前用<p>包裹<ion-list>无效，是因为ion-item内部的样式优先级更高，而且这种方式会全局影响列表内容，无法实现局部文本样式。

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