Как добавить новую строку в textContent в javascript

У меня есть следующий метод -

    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');
        listItem.textContent = `Text: ${data1} Sentiment: ${predicted_label}`;
        historyList.prepend(listItem);  
    }

Я хочу добавить новую строку между Text: ${data1} и Sentiment: ${predicted_label}.

Я пробовал добавить \n, пробовал добавить тег <br>, но ничего не помогает.

ты уверен, что это не работает? listItem.textContent = Текст: ${data1}\nSentiment: ${predicted_label};

Chris G 24.04.2024 21:48

да, пробовал это @ChrisG

Abin Raju 24.04.2024 21:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
55
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Рендеринг HTML не учитывает символы новой строки — вам нужно будет использовать внутренний HTML вместо textContent и добавить тег <br> в место разрыва строки.

Вы можете использовать CSS для стилизации элемента списка, чтобы отображать «Текст» и «Настроение» в отдельных строках.

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');
    listItem.textContent = `Text: ${data1}\nSentiment: ${predicted_label}`;
    listItem.style.whiteSpace = "pre-line"; // style for line breaks
    historyList.prepend(listItem);
}

Другие вопросы по теме