How to insert HTML with inline css styles and render using javascript

Question

I'm trying to add HTML code with inline CSS styles and to render into HTML page using 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);

when I run this code its added to HTML page but seems wthout all css styles.

How to add my HTML code with inline css styles and to render using javascript?

You can try using jquery

Brain Gamer
– Brain Gamer

2020-05-08 17:24:51 +00:00
Commented May 8, 2020 at 17:24 — Brain Gamer
– Brain Gamer, Commented May 8, 2020 at 17:24

Avni Yayin · Accepted Answer · 2020-05-08 17:18:42Z

2

You have some syntax errors inside and style attribute, use this:

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

answered May 8, 2020 at 17:18

Avni Yayin

4592 gold badges8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S. Hesam · Accepted Answer · 2020-05-08 17:25:07Z

1

Using Template literals maybe better and it causes to reduce your error

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

answered May 8, 2020 at 17:25

S. Hesam

7,1616 gold badges46 silver badges66 bronze badges

Collectives™ on Stack Overflow

How to insert HTML with inline css styles and render using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related