如何用内联css样式插入HTML并使用javascript渲染

Question

我想在HTML代码中添加内联CSS样式，并使用JS渲染到HTML页面。

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样式。

如何添加内嵌CSS样式的HTML代码，并使用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

使用Template的文字也许会更好，它可以减少你的错误。

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);