I need to put at every page this code:

document.body.innerHTML += '<div style="position:fixed; text-align:center; left:30px; widht: 200px;bottom: -12px;"> <div class="card" style="position: relative;background: #EC2D2D;border-radius: 5px;padding: 20px 0 0px 0;box-sizing: border-box;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);-webkit-transition: .3s ease;transition: .3s ease;"> <h1 class="title" style="position: relative;z-index: 1;border-left: 5px solid #FFFFFF;margin: 0 0 25px;padding: 10px 0 10px 10px;color: #FFFFFF;font-size: 32px;font-weight: 600;/* text-transform: uppercase; */">50% less</h1> <div class="button-container" style="margin: 0 20px;text-align: center;"> <button style="outline: 0;cursor: pointer;position: relative;display: inline-block;background: 0;color: #EC2D2D;background: #fff;width: 170px;border: 2px solid #C70A0A; padding: 10px 0;font-size: 14px;font-weight: 600;line-height: 1;text-transform: uppercase;overflow: hidden;-webkit-transition: .3s ease;transition: .3s ease;"><span>Bid and Book Now</span></button> </div> <div class="footer" style="margin: 20px 0 0;color: #FFFFFF !important;font-size: 14px;font-weight: 100;text-align: center;"> <p style="color: inherit;text-decoration: none;-webkit-transition: .3s ease;transition: .3s ease;">BEST RATES - only on website</p> <p style="font-size: 10px;">End in: 1d 2h 33m</p></div> </div> <div class="card alt" style="position: absolute;top: 40px;border: 3px solid #ED2553;right: -40px;z-index: 10;width: 80px;height: 80px;background: #FFFFFF;background-image: url(&quot;.jpg&quot;);border-radius: 100%;box-shadow: none;padding: 0;-webkit-transition: .3s ease;transition: .3s ease;"> </div> </div> ';

This code doesn't work well at every page. Also, I think its very slow and makes problem for some pages. How can I write this with appendChild or something similar?

I can't use JQuery's append because I have to use plain JavaScript code.

What would this code look like with appendChild?

I need to put at every page this code:

document.body.innerHTML += '<div style="position:fixed; text-align:center; left:30px; widht: 200px;bottom: -12px;"> <div class="card" style="position: relative;background: #EC2D2D;border-radius: 5px;padding: 20px 0 0px 0;box-sizing: border-box;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);-webkit-transition: .3s ease;transition: .3s ease;"> <h1 class="title" style="position: relative;z-index: 1;border-left: 5px solid #FFFFFF;margin: 0 0 25px;padding: 10px 0 10px 10px;color: #FFFFFF;font-size: 32px;font-weight: 600;/* text-transform: uppercase; */">50% less</h1> <div class="button-container" style="margin: 0 20px;text-align: center;"> <button style="outline: 0;cursor: pointer;position: relative;display: inline-block;background: 0;color: #EC2D2D;background: #fff;width: 170px;border: 2px solid #C70A0A; padding: 10px 0;font-size: 14px;font-weight: 600;line-height: 1;text-transform: uppercase;overflow: hidden;-webkit-transition: .3s ease;transition: .3s ease;"><span>Bid and Book Now</span></button> </div> <div class="footer" style="margin: 20px 0 0;color: #FFFFFF !important;font-size: 14px;font-weight: 100;text-align: center;"> <p style="color: inherit;text-decoration: none;-webkit-transition: .3s ease;transition: .3s ease;">BEST RATES - only on website</p> <p style="font-size: 10px;">End in: 1d 2h 33m</p></div> </div> <div class="card alt" style="position: absolute;top: 40px;border: 3px solid #ED2553;right: -40px;z-index: 10;width: 80px;height: 80px;background: #FFFFFF;background-image: url(&quot;http://i.imgur./32T7CPH.jpg&quot;);border-radius: 100%;box-shadow: none;padding: 0;-webkit-transition: .3s ease;transition: .3s ease;"> </div> </div> ';

This code doesn't work well at every page. Also, I think its very slow and makes problem for some pages. How can I write this with appendChild or something similar?

I can't use JQuery's append because I have to use plain JavaScript code.

What would this code look like with appendChild?

• javascript
• jquery
• css
• innerhtml
• appendchild

Share Improve this question Follow edited Feb 26, 2016 at 16:31 Nathan 8,99199 gold badges5555 silver badges8282 bronze badges asked Feb 26, 2016 at 15:15 MonkeyBusinessMonkeyBusiness 59311 gold badge88 silver badges2323 bronze badges 8

• Which problem do you have at "some page" ? – Davide Lorenzo MARINO Commented Feb 26, 2016 at 15:16
• My console log block - and rewrite all body dom elements... – MonkeyBusiness Commented Feb 26, 2016 at 15:16
• Yes because you are setting a new content for the whole HTML. Your code said: take the innerHTML of body (that is a string) add to it a string (your string between apex) and set this new string to the innerHTML, you are not appending it. – Davide Lorenzo MARINO Commented Feb 26, 2016 at 15:18
• So how I can solve this and use appendChild ? – MonkeyBusiness Commented Feb 26, 2016 at 15:19
• 1 This question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Commented Feb 26, 2016 at 15:22

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

The method appendChild take a node and add this node to the element on which it was called.

var node = document.createElement("DIV");  
var textNode = document.createTextNode("My Div content");
node.appendChild(textNode);
document.body.appendChild(node); 

You can't use appendChild with a string containing the whole html.

What you can do is create a node. Set its innerHTML with the huge string. Then append the node to the body.

---

Code should be something similar to this:

var content = ....
var newNode = document.createElement("DIV");  
newNode.innerHTML = content;
document.body.appendChild(newNode); 

in vanilla js you can use .appendChild which will add to the element caller the node passed as argument.

In your case (with a string as dom element/s to be insert) you could do this trick:

var el = document.createElement("div");
    el.innerHTML = "<your dom code>";

while (el.firstChild) document.body.appendChild(el.firstChild);

It's a bit rude but this way you'll create an element, filling it with your string dom and then move each child to the document.body

---

Here a JsFiddle as example using your code