Как вставить HTML с помощью встроенных стилей css и выполнить рендеринг с использованием javascript

Question

Я пытаюсь добавить код HTML со встроенными стилями CSS и отобразить на странице HTML, используя JS:

var div = document.createElement('div');

div.innerHTML =
    "   <article id='sp-shop-offer' dir='ltr' style='bottom: 0px;width: 100%;height: 100%;left: 0px;z-index: 10000000;letter-spacing: 0;font-family: 'Open Sans'" sans-serif;font-weight: 400;font-size: 12px;color: white;position: fixed;overflow: hidden;'>  "  + 
 /// ETC etc etc
 "           </div>  "  + 
 "       </section>  "  + 
 "  </article>  ";

document.body.appendChild(div);

, когда я запускаю этот код, он добавляется к HTML страница, но кажется без всех стилей css.

Как добавить мой код HTML со встроенными стилями css и выполнить рендеринг с использованием javascript?

Answer 1

У вас есть синтаксические ошибки внутри и в атрибуте стиля, используйте это:

var div = document.createElement('div');

div.innerHTML =
    "   <article id='sp-shop-offer' dir='ltr' style='bottom: 0px;width: 100%;height: 100%;left: 0px;z-index: 10000000;letter-spacing: 0;font-family: Open Sans, sans-serif;font-weight: 400;font-size: 12px;color: white;position: fixed;overflow: hidden;'>  "  + 
 /// ETC etc etc
 "           </div>  "  + 
 "       </section>  "  + 
 "  </article>  ";

document.body.appendChild(div);

Answer 2

Использование шаблонных литералов может быть лучше, и это уменьшит вашу ошибку

var div = document.createElement('div');

div.innerHTML =
    `   <article id='sp-shop-offer' dir='ltr' style='bottom: 0px;width: 100%;height: 100%;left: 0px;z-index: 10000000;letter-spacing: 0;font-family: Open Sans, sans-serif;font-weight: 400;font-size: 12px;color: white;position: fixed;overflow: hidden;'>  

          </div>  
       </section>  
   </article>  `;

document.body.appendChild(div);