document.body.appendChild(i)
You could try
document.getElementsByTagName('body')[0].appendChild(i);
Now that won't do you any good if the code is running in the <head>, and running before the <body> has even been seen by the browser. If you don't want to mess with "onload" handlers, try moving your <script> block to the very end of the document instead of the <head>.
It is working. Just modify to null check:
if(document.body != null){
document.body.appendChild(element);
}
Pointy's suggestion is good; it may work, but I didn't try.
In 2019 you can use querySelector for that.
It's supported by most browsers (https://caniuse.com/#search=querySelector)
document.querySelector('body').appendChild(i);