Как поменять стиль элемента при выводе через innerHTML

Question

////HTML

<section>
    <div class="div-16">Хеллоу</div>
    <div class="div-16">Хеллоу</div>
    <div class="div-16">Хеллоу</div>
    <button class="button-primary b-16">Task-12</button>
    <div class="out-16"></div>
</section>

///////////JS

let div16 = document.querySelectorAll('.div-16');
let btn16 = document.querySelector('.b-16');
let out16 = document.querySelector('.out-16');

btn16.addEventListener('click', () => {
    out16.innerHTML = '';
    f16();
});
function f16(){
    for(let i = 0; i < div16.length; i++){
        div16[i].style.color = 'red'
        out16.innerHTML = div16[i].innerHTML
    };
};

Необходимо вывести в out16 содержимое div с классом div-16 - "Хеллоу" со шрифтом красного цвета.При указанном коде "Хеллоу" не выводится с цветом шрифта. Есть еще какие способы решения кроме:

out16.innerHTML += "<div class = 'div-16' style = 'color: red'>"Хеллоу"</div>"

Answer 1

let div16 = document.querySelectorAll('.div-16');
let btn16 = document.querySelector('.b-16');
let out16 = document.querySelector('.out-16');

btn16.addEventListener('click', () => {
    out16.innerHTML = '';
    f16();
});
function f16(){
    for(let i = 0; i < div16.length; i++){
        out16.style.color ='red'
        out16.innerHTML +=  div16[i].innerHTML + ' ' + '<br>'
    };
};

БЛОГ НА HUSL

Как поменять стиль элемента при выводе через innerHTML

Ответы (1 шт):