Не получается присвоить стили элементу search, вставляемому в строку?

Question

[Михаил]

Всем привет!
Не получается присвоить стили элементу search, вставляемому в строку.

let result = p.split(search);
info.innerHTML = result[0] + search + result[1];

пробовал так
search.style = 'background:green;color:red';
и вот так
search.classList.add('red');
но никак не получается.
Как это можно сделать?

Вот здесь пример
https://codepen.io/mk3mk/pen/oNgzzVZ?editors=1011

Answer 1

[Алексей Ярков]

innerHTML убрать. Вы пытаетесь стиль строке присвоить, а не DOM элементу.

Comments

[Михаил]

не получается
пробовал убирать innerHTML, но получается не то что надо.
если можно подскажите как именно лучше сделать?

[Алексей Ярков]

Михаил, я только что убрал и у меня работает

[Михаил]

Алексей Ярков, как работает ?
Подстветилось слово "она" ? которое стоит в теге search ?
Это да. Это у меня тоже получается.
Но мне надо чтобы подсветилось слово "она" в результирующей строке.

[Михаил]

я пробовал вот такой вариант, и тоже не работает

let p = document.querySelector('#p1').innerHTML;
let info = document.querySelector('#info');
let search = document.querySelector('#search');
let searchRes = search.innerHTML;

let result = p.split(searchRes);
info.innerHTML = result[0] + searchRes + result[1];
searchRes.style = 'display:block;background:green;color:red';
searchRes.classList.add('red');

[Михаил]

Всё! получилось!
Обернул search в теги span со стилями...
вот так

info.innerHTML = 'Здесь выводится результат: ' + '<br>' + result[0] + '<span style="color:red">' + search + '</span>' + result[1];