JavaScript：如何在textContent中添加文本换行？

你遇到的问题是因为textContent会把所有内容当作纯文本处理，不管是\n还是<br>标签都会被转成普通字符显示，不会解析成换行。下面是几种可行的解决方式：

方法一：使用innerHTML（注意XSS风险） #

如果data1是可信内容（比如不是用户输入的未知内容），可以直接把textContent换成innerHTML，这样<br>标签会被正确解析：

function callBack(data1, predicted_label){
    const resultParagraph = document.getElementById("resultParagraph"); 
    resultParagraph.textContent = `Sentiment: ${predicted_label}`;
    const historyList = document.getElementById("historyList");
    const listItem = document.createElement('li');
    // 替换textContent为innerHTML，使用<br>换行
    listItem.innerHTML = `Text: ${data1}<br>Sentiment: ${predicted_label}`;
    historyList.prepend(listItem);  
}

⚠️ 注意：如果data1包含用户输入的内容，直接用innerHTML可能导致XSS攻击，这种情况建议用下面的安全方法。

方法二：用CSS保留换行符 #

给<li>元素设置white-space: pre-line样式，这样textContent里的\n会被解析成换行：

function callBack(data1, predicted_label){
    const resultParagraph = document.getElementById("resultParagraph"); 
    resultParagraph.textContent = `Sentiment: ${predicted_label}`;
    const historyList = document.getElementById("historyList");
    const listItem = document.createElement('li');
    // 添加\n换行，同时设置CSS样式
    listItem.textContent = `Text: ${data1}\nSentiment: ${predicted_label}`;
    listItem.style.whiteSpace = 'pre-line';
    // 也可以提前写CSS类，比如.list-item-wrap { white-space: pre-line; }，然后用listItem.classList.add('list-item-wrap')
    historyList.prepend(listItem);  
}

方法三：创建子节点拼接（最安全） #

通过创建文本节点和<br>元素来拼接内容，完全避免XSS风险，适合处理用户输入的内容：

function callBack(data1, predicted_label){
    const resultParagraph = document.getElementById("resultParagraph"); 
    resultParagraph.textContent = `Sentiment: ${predicted_label}`;
    const historyList = document.getElementById("historyList");
    const listItem = document.createElement('li');
    
    // 创建文本节点和换行元素
    const textNode1 = document.createTextNode(`Text: ${data1}`);
    const br = document.createElement('br');
    const textNode2 = document.createTextNode(`Sentiment: ${predicted_label}`);
    
    // 依次添加到li中
    listItem.appendChild(textNode1);
    listItem.appendChild(br);
    listItem.appendChild(textNode2);
    
    historyList.prepend(listItem);  
}

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