How to add an html element to tampermonkey

Question

I know how to program in Html/Css, Javascript, and jQuery.

Although, I just began programming inside of Tampermonkey so I'm not sure how to implement html/css into Tampermonkey. The scripts' purpose is to add to an already existing website, I already made it so it runs when I go on the website, but when I try doing it myself, nothing comes up. I already wrote the UserScript part and added the jQuery UI.

For starters, so I can just get the idea of how to do it, I would like to simply create a <div></div> element and using Css just simply make it a visible box over all the other elements on the page.

I have no idea how to start, but I'm thinking maybe appending a "div" into the body element of the website but I'm not sure how to do this and manipulating it.

Answer 1

I have a script running for SO and add a button like this

// ==UserScript==
// @name           Fixed top menu + Inbox notification + Achievement notification
// @author         LGSon (Fork of Cameron Bernhardt's (AstroCB) "Fixed Stack Exchange Top Bar")
// @version        1.0
// @description    Fixed positioned top bar of Stack Exchange sites and notification in title bar
// @match          *://*.stackoverflow.com/*
// @exclude        *://api.stackexchange.com/*
// @exclude        *://blog.stackexchange.com/*
// @exclude        *://blog.stackoverflow.com/*
// @exclude        *://chat.stackexchange.com/*
// @exclude        *://chat.stackoverflow.com/*
// @exclude        *://data.stackexchange.com/*
// @exclude        *://elections.stackexchange.com/*
// @exclude        *://stackexchange.com/*
// @grant          GM_addStyle
// ==/UserScript==

var button = document.createElement("Button");
button.innerHTML = "Title";
button.style = "top:0;right:0;position:absolute;z-index:99999;padding:20px;";
document.body.appendChild(button);