Develop Reference

<br> not being appended to div

ogres = document.getElementById('${contentID}')
.
let prettify = streamArray[streamArray.length - 1].split(/--/),
layers = document.createTextNode(prettify[0]),
onions = document.createTextNode(prettify[1]),
breaking = document.createElement('br');
I have an array of two elements that I've created called prettify.
I have definitely confirmed that the prettify[0] and prettify[1] are the elements I want so I make them into onions and layers which are text nodes to be appended to the div.
You'll note I also have breaking which is a break element I create and also append to the div.
I then have the div, orges.
Now for some unknown reason when I do this:
ogres.appendChild(layers);
ogres.appendChild(breaking);
ogres.appendChild(onions);
ogres.appendChild(breaking);
on the html page, this is created:
layersonions
<br>
1: why is this happening
2: how do I fix it?
3: no I don't plan on keeping these variable names, but they are fun :3

When you use document.createElement('br'); to create an element, it is appended as the second node of the parent.
Since you are using the same reference again, it simply detaches the existing element and appends it again in the new position.
It is a single reference to the element. To fix it you will have to create and append an element on the fly.
ogres.appendChild(layers);
ogres.appendChild(document.createElement('br'));
ogres.appendChild(onions);
ogres.appendChild(document.createElement('br'));
appendChild
If you still want to use the variable reference then you could use the cloneNode method which will clone the existing node before insertion.
ogres.appendChild(layers);
ogres.appendChild(breaking);
ogres.appendChild(onions);
ogres.appendChild(breaking.cloneNode(false));
cloneNode

Get last added element of an element

I have a pivot element and I want that whenever an element is added to this pivot element a javascript function is called on it. The call must happen exact once per element.
DOMNodeInserted is marked as deprecated so I tried to use the workaround found here. The approach is working fine, but in addition to the element to which the addition happended (event.target), I also need to know which element was added.
Do I have to keep record of all elements added to my pivot element and then compare them after the event happened to detect new elements or is there an easier approach?

If your variable references a node, to retrieve the last item added to it you can use the lastChild property.
var node = document.getElementById("something");
var last = node.lastChild;
last.appendChild(document.createTextNode("I'm the last one..."));
An alternative may be childNodes:
var node = document.getElementById("something");
node.childNodes[node.childNodes.length - 1].appendChild(document.createTextNode("I'm the last one..."));
For extra reference: https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild
and https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

Jquery clone method to clone mutliple (more than one) div's (not a single div multiple times) inside a page

I need a method to clone say 4 div's with id's like d_1, d_2, d_3, d_4
including the contents inside each div all at once and then detach all divs, and then I need to find copy of d_1 and its contents from the clone and append it again to the page.
something like:
var cloned=$('[id^="d_"]').clone();
$('[id^="d_"]').detach();
and then find div with id =d_1 from clone and append it to body.
Is it possible?

Use Document Fragment.
var $documentFragment = $(document.createDocumentFragment());
$('[id^="d_"]').each(function(){
$documentFragment.append($(this).clone().addClass("_cloned"));
});
$documentFragment.clone().appendTo(document.body);
If you want looking for an element into the fragment, you can do this:
$(document.body).find("#d_1._cloned"). ... ;
If you want to remove all the element and then append only the first copied into fragment:
$("._cloned", document.body).remove();
$documentFragment.find("#d_1").clone().appendTo(document.body);

You can appendTo() an element to detach and move an element elsewhere.
var els = $('[id^="d_"]')
els.detach();
els.each(function() {
if (this.id.indexOf('d_1') !== -1) {
$(this).appendTo(document.body);
}
});
// do something else with els later, too.

How to write to a <div> element using JavaScript?

I've searched around using Google and Stack Overflow, but I haven't seemed to find a answer to this. I want to write text inside a <div> element, using JavaScript, and later clear the <div> element, and write more text into it. I am making a simple text adventure game.
This is what I am trying to do:
<DOCTYPE!HTML>
<body>
<div class="gamebox">
<!-- I want to write in this div element -->
</div>
</body>
As a new user to JavaScript, how would I be able to write inside the div element gamebox? Unfortunately, my JavaScript skills are not very good, and it would be nice if you can patiently explain what happens in the code.

You can use querySelector to get a reference to the first element matching any CSS selector. In your case, a class selector:
var div = document.querySelector(".gamebox");
querySelector works on all modern browsers, including IE8. It returns null if it didn't find any matching element. You can also get a list of all matching elements using querySelectorAll:
var list = document.querySelectorAll(".gamebox");
Then you access the elements in that list using 0-based indexes (list[0], list[1], etc.); the length of the list is available from list.length.
Then you can either assign HTML strings to innerHTML:
div.innerHTML = "This is the text, <strong>markup</strong> works too.";
...or you can use createElement or createTextNode and appendChild / insertBefore:
var child = document.createTextNode("I'm text for the div");
div.appendChild(span); // Put the text node in the div
Those functions are found in the DOM. A lot of them are now covered in the HTML5 specification as well (particularly Section 3).

Select a single element with document.querySelector or a collection with document.querySelectorAll.
And then it depends, on what you want to do:
Writing Text into the div or create an Element and append it to the div.

Like mentioned getElementsByClassName is faster. Important to know it when you use this you get returned an array with elements to reach the elment you want you specify its index line [0], [1]
var gameBox = document.getElementsByClassName('gamebox')[0];
Here how you can do it
//returns array with elements
var gameBox = document.getElementsByClassName('gamebox');
//inner HTML (overwrites fsd) this can be used if you direcly want to write in the div
gameBox[0].innerHTML ='<p>the new test</p>';
//Appending when you want to add extra content
//create new element <p>
var newP = document.createElement('p');
//create a new TextNode
var newText = document.createTextNode("i'm a new text");
//append textNode to the new element
newP.appendChild(newText);
//append to the DOM
gameBox[0].appendChild(newP);
https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

Javascript add node

So I have a function like such:
var elem = document.createElement( 'svg' );
elem.id = 'svg1';
and I would like to, in a later function, be able to grab this element via document.getElementById('svg1').
I have found this does not work, and through some research, aka google, found that adding an element this way does not actually add it to the 'node tree'. How can I create an element so I can later reference the Id?

You need to add it to the DOM. For example, to add it as a child of an element with an ID "parent":
document.getElementById("parent").appendChild(elem);

To add an element to the DOM you do this:
document.body.appendChild(elem);
That adds the object to the BODY. If you want to add the node to another node, you replace body with getElementById("id").