Как изменить цвет шрифта нескольких строк в теге p для строки Dynami c

Question

У меня есть список, который нужно отображать во всплывающем окне. Предположим, мой список содержит информацию ниже:

строка 1: ошибка несоответствия имени

строка 2: ожидаемые числа

строка 3: обязательное поле

Я хочу строку1 , строка 2, строка 3 должны быть красным цветом, а остальная часть текста черным

TS:

 getMessages()
 {
  var msg :string[] = [];
  var separatedMsg:any[];
  msg = this.getErrorMessage(this.messages); 
  var msgBody = document.getElementById("msgBody");
  msgBody.innerHTML="";
  for(var i=0;i<msg.length;i++)
   {
   separatedMsg=msg[i].split(":")
   var pElement:any = document.createElement("p"); 
   var emElement:any = document.createElement("em");
   emElement.innerHTML =separatedMsg[0];
   pElement.innerHTML =  emElement.innerHTML+separatedMsg[1]+'\n';
   emElement.style.color ="Red"
   pElement.style.color = "Black"
   msgBody.appendChild(pElement)
    }
 }

с этим я получаю весь текст черным цветом, моя идея заключалась в том, чтобы разделить строка at: и сделайте первую половину тегом em, а вторую половину тегом P. Я не знаю, как добавить оба этих тега. Как мне этого добиться?

Answer 1

a) Возможно, проще установить внутренний HTML как строку:

msgBody.innerHTML='<div class="msg-div">test<p class="msg-p">test2 <span class="msg-what-ever">word</span></p></div>';

b) Вы можете использовать классы вместо встроенного стиля. См. inline-styles-vs-classes

.msg-div {color: green;}
.msg-p {color: red;}
.msg-what-ever {color: blue;}