Develop Reference

I have created an element in plain css by a bookmarklet. It is created, but not visible

My code follows:
g = document.createElement('div');
g.setAttribute("id", "divcontainer");
g.innerHTML = `
HTML GOES HERE
`
When I use this on a site, I want the div centered and visible, it is working in the fact that it creates the div (tested that in console) but I cannot see it.
I am not using JQuery but if I need to, I can. My goal is to have a UI type thing.

Your code only creates the element but doesn't add it to the DOM, in order to do that you have to use document.body.appendChild(element) and that will add the element to the body element, you can also use the same method to add the element inside and element that you select by id or by QuerySelector.
You can modify your code as follows :
g = document.createElement('div');
g.setAttribute("id", "divcontainer");
g.innerHTML = `HTML GOES HERE`;
document.body.appendChild(g);
If you want to add multiple elements you can use append() instead of appendChild().
document.body.append(g,g2,g3,g4)
Hope that helps!

Get element by id and put it inside bootstrap col

I have a div with an ID, this div is added to the web page by the library but i want to put this div in a col-xs-6, can i do something like document.getElementById() then put it in col-xs-6?

The easiest way to do this without any framework is to use element.classList.add method.
var element = document.getElementById("div1");
element.classList.add("otherclass");

IF your using jquery then you can simply do this,
$('#Id_of_element').addClass('col-xs-6')

If I understood you correctly you want to grab this div by id and add to it bootstrap class col-xs-6. If so then try this:
var yourDiv = document.getElementById("ID");
yourDiv.className += " col-xs-6";

In Jquery how to refer javascript's element created by document.createElement

I have a code already written in javascript:
var objTo = document.getElementById('krishna')
var href1 = document.createElement("div");
href1.setAttribute("style","float: left");
objTo.appendChild(href1);
Already so many elements are appended to href1 in javascript.
I want to add some more elements to href1 using jquery
I tried href1.append("<br>");
it says href1.append is not a function
How to use jquery append to append an element to href1.

You need to turn the native element into a jQuery object. Native elements don't recognize jQuery methods
Try
$(href1).append("<br>");
If you want to do all this with jQuery alone the code is quite simple
// create new <div> element and apply style
var href1 = $("<div>").css('float','left');
// append to id=krishna
$('#krishna').append(href1);

Appending to dynamic content

I have a set a dynamically created divs with the same class name. Now I want to append a entirely new div to all of the above mentioned divs.
Say the class name is extra-upper-block
At the end of my page I have this code
<script>
//function call to load dynamic content
</script>
<script>
$('.extra-upper-block').append('<div>New Div</div>');
</script>
This throws an error in chrome's console
Uncaught TypeError: undefined is not a function
But when this code is executed in chrome's console after the page is loaded, it works!
Why doesn't it work even when I load the dynamic content before executing the append command. Help?

Use jQuery class selector.
$(document).ready(function(){
$('.extra-upper-block').append('<div>New Div</div>');
});
Wrap your code in $(document).ready() for jQuery to get the elements available, and include jQuery file reference.
Note : .append() method is a part of jQuery.
Demo

document.getElementsByClassName returns an array-like object, you can't use it like jQuery, you need to access the individual element in a loop. Also, use appendChild on DOM elements, because they don't have an append method (like jQuery does).
Also, you are trying to append a string <div>New div</div>, you can't directly do that with a DOM element, so instead you can create the div element like so:
Demo
var elements = document.getElementsByClassName('extra-upper-block');
for(var i=0; i<elements.length; i++){
var newDiv = document.createElement('div');
newDiv.appendChild(document.createTextNode('New div'));
elements[i].appendChild(newDiv);
}
Note: querySelectorAll has better cross browser support than this. If you have jQuery included you can simply do:
$('extra-upper-block').append('<div>New Div</div>');
As you can see, with jQuery you can append a string directly.

try writing
document.getElementsByClassName('extra-upper-block')[0].appendChild(document.createElement('div'));

Append is a function in jQuery, try this:
<script>
$(function() {
$('.extra-upper-block').append('<div>New Div</div>');
});
</script>

Remove an element from the DOM based on a variable reference to it?

I'm dynamically creating a div like this:
var gameScoreDiv= document.createElement('div');
gameScoreDiv.innerHTML= 'Score: 0';
wrapperDiv.appendChild(gameScoreDiv);
Later I need to remove this div from DOM. How can I get rid of that div?
Is it possible to simply delete the gameScoreDiv variable and have it remove also the DOM element (I have a feeling the answer is no)?

2019 update
You can remove node with ChildNode.remove() now:
gameScoreDiv.remove()
It's supported by every major browser with the not surprising exception of IE (for which you can add a tiny polyfill though, if needed).
You can do:
gameScoreDiv.parentNode.removeChild(gameScoreDiv);
or, if you still have reference to the wrapperDiv:
wrapperDiv.removeChild(gameScoreDiv);
In jQuery it would be:
$(gameScoreDiv).remove();
but this will use the parentNode way, see the source.

You're looking for the removeChild method.
In your case I see that wrapperDiv is the parent element, so simply call it on that:
wrapperDiv.removeChild(gameScoreDiv);
Alternatively, in another scope where that isn't available, use parentNode to find the parent:
gameScoreDiv.parentNode.removeChild(gameScoreDiv);

you can give your dynamically created div an id, and later you can see if any element with this id exists, delete it. i.e.
var gameScoreDiv= document.createElement('div');
gameScoreDiv.setAttribute("id","divGameScore");
gameScoreDiv.innerHTML= 'Score: 0';
wrapperDiv.appendChild(gameScoreDiv);
and later:
var gameScoreDiv= document.getElementById('divGameScore');
wrapperDiv.removeChild(gameScoreDiv);

You can try this:
gameScoreDiv.id = "someID";
//Remove the div like this:
var element = document.getElementById('someID');
element.parentNode.removeChild(element);