Создание всего объекта DOM со встроенными стилями с использованием innerHTML, это безопасно?

Question

У меня есть два варианта:

var div = document.createElement('div');
div.style.cssText = 'background: none repeat scroll 0 0 #000000; ' +
    'opacity: 0.7; display: block; top: 0; bottom: 0; left: 0; ' +
    'right: 0; position: fixed; zIndex: ' + zIndexHighest() + ';';
document.body.appendChild(div);

Или

var span = document.createElement('span');
span.innerHTML = '<div style="background: none repeat scroll 0px 0px #000000; ' +
    'opacity: 0.7; display: block; top: 0px; bottom: 0px; left: 0px; ' +
    'right: 0px; position: fixed; z-index: ' + zIndexHighest() + ';"></div>';
document.body.appendChild(span);

Очевидно, что второй способ быстрее, но я помню, что где-то читал, что innerHTML может игнорировать встроенный стиль CSS. Кто-нибудь знает, правда ли это?

Причина, по которой я хочу сделать это вторым способом, заключается в том, что я хочу поместить пару элементов div в dom (я хочу создать небольшой пользовательский модальный диалог)

Answer 1

Безопасно использовать с innerHTML, но почему бы не использовать класс CSS вместо встроенного стиля? Это сделает ваш код намного проще и легче для чтения, а также уменьшит пропускную способность и уменьшит размер вашего файла. Единственный раз, когда я использую встроенные стили, это объявляю ширину или высоту объекта и, возможно, еще одну вещь.