如何使用內聯 css styles 插入 HTML 並使用 ZDE9B9ED78D7E2E1DCEEFFEE780E2F919 進行渲染

Question

我正在嘗試使用內聯 CSS styles 添加 HTML 代碼並使用頁面 4 渲染到 Z4C4AD5FCA2E03A3F74ZDBB1JSAA：

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 styles。

如何使用內聯 css styles 添加我的 HTML 代碼並使用 ZDE9B9ED78D7E2E1DCEEFFEE780E2F 進行渲染？

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