Как сделать элементы массива жирными или курсивом?

Question

[Александр AS]

Добрый день, всем!
Как сделать элементы массива жирными или курсивом через JS?
Нашел методы italic() and bold(), но они работают с document.write() и из-за это выводятся на странице по два раза.
По советуйте пожалуйста, как сделать лучше...

'use strict';

let week = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];

for (let i = 0; i < week.length; i++) {

    let dayOff = document.createElement('div');
    dayOff.innerHTML = week[i];

    if (week[i] == 'Понедельник') {
        document.write(week[i].italics());
        let date = new Date(2019, 4, 3);
        console.log(date);
    }
    if (week[i] == 'Суббота' || week[i] == 'Воскресенье') {
        document.write(week[i].bold());
    }

    document.body.appendChild(dayOff);
}

Спасибо!

Answer 1

[Сергей Соколов]

Как сделать элементы жирными или курсивом:

// через методы строки .bold() и .italics()
var html = "Понедельник".italics(); // html==='<i>Понедельник</i>';
var html = "Суббота".bold(); // html==='<b>Суббота</b>';

// вручную собрать строку
var dow = 'Понедельник';
var html = '<i>' + dow + '</i>'; // html==='<i>Понедельник</i>';

// то же самое в обратных кавычках
var dow = 'Понедельник';
var html = `<i>${dow}</i>`; // html==='<i>Понедельник</i>';

Правильнее через CSS, но сейчас не об этом.

document.write() – плохая практика, не надо его.
Лучше собрать HTML в строку и потом присобачить куда-то:

const week = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];

for (let i = 0, len = week.length; i < len; i++) {
    let html = week[i];
    if (i === 0) html = html.italics(); // понедельник
    else if (i > 4) html = html.bold(); // выходные

    const div = document.createElement('div');
    div.innerHTML = html;
    document.body.appendChild(div);
}

Comments

[Александр AS]

Больше спасибо!!!

Answer 2

[Andrey Suha]

Обарачиваете елемент в какой то span, потом
https://developer.mozilla.org/ru/docs/Web/API/HTML...

Или добавляете класс к елементу и стилизует класс

Answer 3

[Володия Викторович]

Это можно с помощью HTML в те места где надо сделать надпись курсивом жирным подчёркнутым надо написать и закрыть тег!
И всё....